From 5b7583531187a77b2522cc8934b8a2c1ef7fd966 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 6 Aug 2025 19:25:54 +0200
Subject: [PATCH 01/16] fix(FileUpload): accept any subtype

The accept prop did not work with image/* etc.
---
 src/runtime/composables/useFileUpload.ts | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 9f7c15612b..8d5c257aa7 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -67,9 +67,31 @@ export function useFileUpload(options: UseFileUploadOptions) {
   }
 
   onMounted(() => {
-    const { isOverDropZone } = dropzone
-      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
-      : { isOverDropZone: ref(false) }
+    const { isOverDropZone } = useDropZone(dropzoneRef, {
+      dataTypes: (types) => {
+        if (dataTypes.value === undefined || accept === '*') {
+          return true
+        }
+
+        return types.some((type) => {
+          return dataTypes.value?.some((acceptedType) => {
+            if (acceptedType.endsWith('/*')) {
+              const base = acceptedType.slice(0, acceptedType.indexOf('/'))
+              return type.startsWith(base + '/')
+            } else {
+              return type === acceptedType
+            }
+          })
+        })
+      }, onDrop: (files, event) => {
+        if (!dropzone) {
+          event.preventDefault()
+          return
+        }
+
+        onDrop(files)
+      }
+    })
 
     watch(isOverDropZone, (value) => {
       isDragging.value = value

From dffdeaf5a814686aa1bc0ffb94c5d23117ad9518 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 6 Aug 2025 19:27:52 +0200
Subject: [PATCH 02/16] Revert "fix(FileUpload): accept any subtype"

This reverts commit 5b7583531187a77b2522cc8934b8a2c1ef7fd966.
---
 src/runtime/composables/useFileUpload.ts | 28 +++---------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 8d5c257aa7..9f7c15612b 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -67,31 +67,9 @@ export function useFileUpload(options: UseFileUploadOptions) {
   }
 
   onMounted(() => {
-    const { isOverDropZone } = useDropZone(dropzoneRef, {
-      dataTypes: (types) => {
-        if (dataTypes.value === undefined || accept === '*') {
-          return true
-        }
-
-        return types.some((type) => {
-          return dataTypes.value?.some((acceptedType) => {
-            if (acceptedType.endsWith('/*')) {
-              const base = acceptedType.slice(0, acceptedType.indexOf('/'))
-              return type.startsWith(base + '/')
-            } else {
-              return type === acceptedType
-            }
-          })
-        })
-      }, onDrop: (files, event) => {
-        if (!dropzone) {
-          event.preventDefault()
-          return
-        }
-
-        onDrop(files)
-      }
-    })
+    const { isOverDropZone } = dropzone
+      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
+      : { isOverDropZone: ref(false) }
 
     watch(isOverDropZone, (value) => {
       isDragging.value = value

From 504862f05298cc090f01dd7825d408d17754e7ac Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Fri, 22 Aug 2025 08:44:18 +0200
Subject: [PATCH 03/16] feat(InputNumber): add showButtons prop

---
 docs/content/3.components/input-number.md       | 17 +++++++++++++++++
 .../app/pages/components/input-number.vue       | 13 +++++++++++++
 src/runtime/components/InputNumber.vue          | 11 +++++++----
 src/theme/input-number.ts                       | 15 ++++++++++++++-
 test/components/InputNumber.spec.ts             |  1 +
 .../__snapshots__/InputNumber-vue.spec.ts.snap  |  8 ++++++++
 .../__snapshots__/InputNumber.spec.ts.snap      |  8 ++++++++
 7 files changed, 68 insertions(+), 5 deletions(-)

diff --git a/docs/content/3.components/input-number.md b/docs/content/3.components/input-number.md
index eb0786d2e7..4977da192b 100644
--- a/docs/content/3.components/input-number.md
+++ b/docs/content/3.components/input-number.md
@@ -216,6 +216,23 @@ props:
 ---
 ::
 
+### Buttons
+
+Use the `showButtons` prop to configure the visibility of increment and decrement buttons.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 0
+  showButtons: false
+  orientation: 'horizontal'
+---
+::
+
 ## Examples
 
 ### With decimal format
diff --git a/playground/app/pages/components/input-number.vue b/playground/app/pages/components/input-number.vue
index 44ea1e59a6..02e9d38caa 100644
--- a/playground/app/pages/components/input-number.vue
+++ b/playground/app/pages/components/input-number.vue
@@ -56,6 +56,19 @@
         orientation="vertical"
       />
     </div>
+    <div class="flex items-center gap-4">
+      <UInputNumber
+        class="w-48"
+        placeholder="No buttons horizontal"
+        :show-buttons="false"
+      />
+      <UInputNumber
+        class="w-48"
+        placeholder="No buttons vertical"
+        orientation="vertical"
+        :show-buttons="false"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index b4b966053c..d6f4bbf9f5 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -51,6 +51,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   decrementIcon?: string
   /** Disable the decrement button. */
   decrementDisabled?: boolean
+  showButtons?: boolean
   autofocus?: boolean
   autofocusDelay?: number
   /**
@@ -90,7 +91,8 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
   disabledIncrement: false,
-  disabledDecrement: false
+  disabledDecrement: false,
+  showButtons: true
 })
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
@@ -112,7 +114,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
   size: inputSize.value,
   highlight: highlight.value,
   orientation: props.orientation,
-  buttonGroup: orientation.value
+  buttonGroup: orientation.value,
+  showButtons: props.showButtons
 }))
 
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
@@ -171,7 +174,7 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <div :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="showButtons" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -186,7 +189,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="showButtons" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton
diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index dab62f6532..f8f2798a02 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -47,6 +47,9 @@ export default (options: Required<ModuleOptions>) => {
       },
       highlight: {
         true: ''
+      },
+      showButtons: {
+        false: ''
       }
     },
     compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -105,7 +108,17 @@ export default (options: Required<ModuleOptions>) => {
       orientation: 'vertical',
       size: 'xl',
       class: 'pe-11'
-    }],
+    }, {
+      orientation: 'vertical',
+      showButtons: false,
+      class: 'pe-2.5'
+    },
+    {
+      orientation: 'horizontal',
+      showButtons: false,
+      class: 'px-2.5 text-start '
+    }
+    ],
     defaultVariants: {
       size: 'md',
       color: 'primary',
diff --git a/test/components/InputNumber.spec.ts b/test/components/InputNumber.spec.ts
index f1287910a1..a159c6abae 100644
--- a/test/components/InputNumber.spec.ts
+++ b/test/components/InputNumber.spec.ts
@@ -29,6 +29,7 @@ describe('InputNumber', () => {
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'absolute' } }],
     ['with ui', { props: { ui: { base: 'rounded-full' } } }],
+    ['without buttons', { props: { showButtons: false } }],
     // Slots
     ['with increment slot', { slots: { increment: () => '+' } }],
     ['with decrement slot', { slots: { decrement: () => '-' } }]
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index 6cd1d6bbf3..d5e993fe57 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -385,3 +385,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without buttons correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index b75b05d722..2a7e4f7748 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -385,3 +385,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without buttons correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;

From e3ed282ea492ac1b6cc41ba7cecb3ba5fd7458bb Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 6 Aug 2025 19:25:54 +0200
Subject: [PATCH 04/16] fix(FileUpload): accept any subtype

The accept prop did not work with image/* etc.
---
 src/runtime/composables/useFileUpload.ts | 28 +++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index 308a8c51ce..fd1cd902f7 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -74,9 +74,31 @@ export function useFileUpload(options: UseFileUploadOptions) {
   }
 
   onMounted(() => {
-    const { isOverDropZone } = dropzone
-      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
-      : { isOverDropZone: ref(false) }
+    const { isOverDropZone } = useDropZone(dropzoneRef, {
+      dataTypes: (types) => {
+        if (dataTypes.value === undefined || accept === '*') {
+          return true
+        }
+
+        return types.some((type) => {
+          return dataTypes.value?.some((acceptedType) => {
+            if (acceptedType.endsWith('/*')) {
+              const base = acceptedType.slice(0, acceptedType.indexOf('/'))
+              return type.startsWith(base + '/')
+            } else {
+              return type === acceptedType
+            }
+          })
+        })
+      }, onDrop: (files, event) => {
+        if (!dropzone) {
+          event.preventDefault()
+          return
+        }
+
+        onDrop(files)
+      }
+    })
 
     watch(isOverDropZone, (value) => {
       isDragging.value = value

From 3de15e3c3d20dbf0fb3c8306b94e1e8ace9b1836 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 6 Aug 2025 19:27:52 +0200
Subject: [PATCH 05/16] Revert "fix(FileUpload): accept any subtype"

This reverts commit 5b7583531187a77b2522cc8934b8a2c1ef7fd966.
---
 src/runtime/composables/useFileUpload.ts | 28 +++---------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/src/runtime/composables/useFileUpload.ts b/src/runtime/composables/useFileUpload.ts
index fd1cd902f7..308a8c51ce 100644
--- a/src/runtime/composables/useFileUpload.ts
+++ b/src/runtime/composables/useFileUpload.ts
@@ -74,31 +74,9 @@ export function useFileUpload(options: UseFileUploadOptions) {
   }
 
   onMounted(() => {
-    const { isOverDropZone } = useDropZone(dropzoneRef, {
-      dataTypes: (types) => {
-        if (dataTypes.value === undefined || accept === '*') {
-          return true
-        }
-
-        return types.some((type) => {
-          return dataTypes.value?.some((acceptedType) => {
-            if (acceptedType.endsWith('/*')) {
-              const base = acceptedType.slice(0, acceptedType.indexOf('/'))
-              return type.startsWith(base + '/')
-            } else {
-              return type === acceptedType
-            }
-          })
-        })
-      }, onDrop: (files, event) => {
-        if (!dropzone) {
-          event.preventDefault()
-          return
-        }
-
-        onDrop(files)
-      }
-    })
+    const { isOverDropZone } = dropzone
+      ? useDropZone(dropzoneRef, { dataTypes: dataTypes.value, onDrop })
+      : { isOverDropZone: ref(false) }
 
     watch(isOverDropZone, (value) => {
       isDragging.value = value

From be3668fa78853d651e966f7d38b411b6aa7e7d87 Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Fri, 22 Aug 2025 08:44:18 +0200
Subject: [PATCH 06/16] feat(InputNumber): add showButtons prop

---
 docs/content/docs/2.components/input-number.md  | 17 +++++++++++++++++
 src/runtime/components/InputNumber.vue          | 11 +++++++----
 src/theme/input-number.ts                       | 15 ++++++++++++++-
 test/components/InputNumber.spec.ts             |  1 +
 .../__snapshots__/InputNumber-vue.spec.ts.snap  |  8 ++++++++
 .../__snapshots__/InputNumber.spec.ts.snap      |  8 ++++++++
 6 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/docs/content/docs/2.components/input-number.md b/docs/content/docs/2.components/input-number.md
index 1ae62cfc6e..51a3ed29e8 100644
--- a/docs/content/docs/2.components/input-number.md
+++ b/docs/content/docs/2.components/input-number.md
@@ -216,6 +216,23 @@ props:
 ---
 ::
 
+### Buttons
+
+Use the `showButtons` prop to configure the visibility of increment and decrement buttons.
+
+::component-code
+---
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: 0
+  showButtons: false
+  orientation: 'horizontal'
+---
+::
+
 ## Examples
 
 ### With decimal format
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index a865e9e039..a7cab2c911 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -52,6 +52,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   decrementIcon?: IconProps['name']
   /** Disable the decrement button. */
   decrementDisabled?: boolean
+  showButtons?: boolean
   autofocus?: boolean
   autofocusDelay?: number
   modelModifiers?: Pick<ModelModifiers, 'optional'>
@@ -92,7 +93,8 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
   disabledIncrement: false,
-  disabledDecrement: false
+  disabledDecrement: false,
+  showButtons: true
 })
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
@@ -116,7 +118,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
   size: inputSize.value,
   highlight: highlight.value,
   orientation: props.orientation,
-  fieldGroup: orientation.value
+  fieldGroup: orientation.value,
+  showButtons: props.showButtons
 }))
 
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
@@ -180,7 +183,7 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <div :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="showButtons" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -195,7 +198,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="showButtons" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton
diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index 8b8bc7f3ae..ba57449c69 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -47,6 +47,9 @@ export default (options: Required<ModuleOptions>) => {
       },
       highlight: {
         true: ''
+      },
+      showButtons: {
+        false: ''
       }
     },
     compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
@@ -105,7 +108,17 @@ export default (options: Required<ModuleOptions>) => {
       orientation: 'vertical',
       size: 'xl',
       class: 'pe-11'
-    }],
+    }, {
+      orientation: 'vertical',
+      showButtons: false,
+      class: 'pe-2.5'
+    },
+    {
+      orientation: 'horizontal',
+      showButtons: false,
+      class: 'px-2.5 text-start '
+    }
+    ],
     defaultVariants: {
       size: 'md',
       color: 'primary',
diff --git a/test/components/InputNumber.spec.ts b/test/components/InputNumber.spec.ts
index f7a8e229a8..22fde29252 100644
--- a/test/components/InputNumber.spec.ts
+++ b/test/components/InputNumber.spec.ts
@@ -30,6 +30,7 @@ describe('InputNumber', () => {
     ['with class', { props: { class: 'absolute' } }],
     ['with ui', { props: { ui: { base: 'rounded-full' } } }],
     ['with .optional modifier', { props: { modelModifiers: { optional: true } } }, { input: '', expected: undefined }],
+    ['without buttons', { props: { showButtons: false } }],
     // Slots
     ['with increment slot', { slots: { increment: () => '+' } }],
     ['with decrement slot', { slots: { decrement: () => '-' } }]
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index f49d7f68ae..6fa062b87a 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -399,3 +399,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without buttons correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index 5e287de339..3872f30f28 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -399,3 +399,11 @@ exports[`InputNumber > renders with ui correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without buttons correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;

From 307c54a63bef962ce27fcdc07957e208640ea8c2 Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Wed, 15 Oct 2025 06:54:06 +0200
Subject: [PATCH 07/16] up

---
 src/runtime/components/InputNumber.vue | 12 ++++++------
 src/theme/input-number.ts              | 13 +++++++++----
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index a7cab2c911..af7722d25f 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -30,7 +30,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * Configure the increment button. The `color` and `size` are inherited.
    * @defaultValue { variant: 'link' }
    */
-  increment?: ButtonProps
+  increment?: ButtonProps | false
   /**
    * The icon displayed to increment the value.
    * @defaultValue appConfig.ui.icons.plus
@@ -43,7 +43,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * Configure the decrement button. The `color` and `size` are inherited.
    * @defaultValue { variant: 'link' }
    */
-  decrement?: ButtonProps
+  decrement?: ButtonProps | false
   /**
    * The icon displayed to decrement the value.
    * @defaultValue appConfig.ui.icons.minus
@@ -52,7 +52,6 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   decrementIcon?: IconProps['name']
   /** Disable the decrement button. */
   decrementDisabled?: boolean
-  showButtons?: boolean
   autofocus?: boolean
   autofocusDelay?: number
   modelModifiers?: Pick<ModelModifiers, 'optional'>
@@ -119,7 +118,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
   highlight: highlight.value,
   orientation: props.orientation,
   fieldGroup: orientation.value,
-  showButtons: props.showButtons
+  increment: props.increment !== false,
+  decrement: props.decrement !== false
 }))
 
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
@@ -183,7 +183,7 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <div v-if="showButtons" :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="increment !== false" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -198,7 +198,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="showButtons" :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="decrement !== false" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton
diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index ba57449c69..787780da37 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -48,7 +48,10 @@ export default (options: Required<ModuleOptions>) => {
       highlight: {
         true: ''
       },
-      showButtons: {
+      increment: {
+        false: ''
+      },
+      decrement: {
         false: ''
       }
     },
@@ -110,13 +113,15 @@ export default (options: Required<ModuleOptions>) => {
       class: 'pe-11'
     }, {
       orientation: 'vertical',
-      showButtons: false,
+      increment: false,
+      decrement: false,
       class: 'pe-2.5'
     },
     {
       orientation: 'horizontal',
-      showButtons: false,
-      class: 'px-2.5 text-start '
+      increment: false,
+      decrement: false,
+      class: 'px-2.5 text-start'
     }
     ],
     defaultVariants: {

From ea2e2cbb154fb5dc177dfd92441a216d2c05a697 Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Wed, 15 Oct 2025 07:02:27 +0200
Subject: [PATCH 08/16] up

---
 src/runtime/components/InputNumber.vue        |  7 ++---
 test/components/InputNumber.spec.ts           |  4 ++-
 .../InputNumber-vue.spec.ts.snap              | 26 +++++++++++++++++--
 .../__snapshots__/InputNumber.spec.ts.snap    | 26 +++++++++++++++++--
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index af7722d25f..feddb57a25 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -30,7 +30,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * Configure the increment button. The `color` and `size` are inherited.
    * @defaultValue { variant: 'link' }
    */
-  increment?: ButtonProps | false
+  increment?: ButtonProps | boolean
   /**
    * The icon displayed to increment the value.
    * @defaultValue appConfig.ui.icons.plus
@@ -43,7 +43,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * Configure the decrement button. The `color` and `size` are inherited.
    * @defaultValue { variant: 'link' }
    */
-  decrement?: ButtonProps | false
+  decrement?: ButtonProps | boolean
   /**
    * The icon displayed to decrement the value.
    * @defaultValue appConfig.ui.icons.minus
@@ -93,7 +93,8 @@ const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
   disabledIncrement: false,
   disabledDecrement: false,
-  showButtons: true
+  increment: true,
+  decrement: true
 })
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
diff --git a/test/components/InputNumber.spec.ts b/test/components/InputNumber.spec.ts
index 22fde29252..a8b0dd1f91 100644
--- a/test/components/InputNumber.spec.ts
+++ b/test/components/InputNumber.spec.ts
@@ -30,7 +30,9 @@ describe('InputNumber', () => {
     ['with class', { props: { class: 'absolute' } }],
     ['with ui', { props: { ui: { base: 'rounded-full' } } }],
     ['with .optional modifier', { props: { modelModifiers: { optional: true } } }, { input: '', expected: undefined }],
-    ['without buttons', { props: { showButtons: false } }],
+    ['without decrement', { props: { decrement: false } }],
+    ['without increment', { props: { increment: false } }],
+    ['with increment and decrement', { props: { increment: false, decrement: false } }],
     // Slots
     ['with increment slot', { slots: { increment: () => '+' } }],
     ['with decrement slot', { slots: { decrement: () => '-' } }]
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index 6fa062b87a..f66d44bc4b 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -95,6 +95,14 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 </div>"
 `;
 
+exports[`InputNumber > renders with increment and decrement correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`InputNumber > renders with increment slot correctly 1`] = `
 "<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
@@ -400,10 +408,24 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 </div>"
 `;
 
-exports[`InputNumber > renders without buttons correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+exports[`InputNumber > renders without decrement correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
   <!--v-if-->
   <!--v-if-->
+</div>"
+`;
+
+exports[`InputNumber > renders without increment correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+  <!--v-if-->
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
   <!--v-if-->
 </div>"
 `;
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index 3872f30f28..6d1eea57ba 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -95,6 +95,14 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 </div>"
 `;
 
+exports[`InputNumber > renders with increment and decrement correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`InputNumber > renders with increment slot correctly 1`] = `
 "<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
@@ -400,10 +408,24 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 </div>"
 `;
 
-exports[`InputNumber > renders without buttons correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+exports[`InputNumber > renders without decrement correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+  <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
   <!--v-if-->
   <!--v-if-->
+</div>"
+`;
+
+exports[`InputNumber > renders without increment correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+  <!--v-if-->
+  <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
   <!--v-if-->
 </div>"
 `;

From 4abb7300a478be25c33522777e62e8d52651d34c Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Wed, 15 Oct 2025 07:12:37 +0200
Subject: [PATCH 09/16] up

---
 .../InputNumberWithoutButtonsExample.vue      | 11 ++++++++
 .../content/docs/2.components/input-number.md | 27 +++++++------------
 2 files changed, 21 insertions(+), 17 deletions(-)
 create mode 100644 docs/app/components/content/examples/input-number/InputNumberWithoutButtonsExample.vue

diff --git a/docs/app/components/content/examples/input-number/InputNumberWithoutButtonsExample.vue b/docs/app/components/content/examples/input-number/InputNumberWithoutButtonsExample.vue
new file mode 100644
index 0000000000..1dc24d30c5
--- /dev/null
+++ b/docs/app/components/content/examples/input-number/InputNumberWithoutButtonsExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const value = ref(5)
+</script>
+
+<template>
+  <UInputNumber
+    v-model="value"
+    :increment="false"
+    :decrement="false"
+  />
+</template>
diff --git a/docs/content/docs/2.components/input-number.md b/docs/content/docs/2.components/input-number.md
index 51a3ed29e8..97dde5648e 100644
--- a/docs/content/docs/2.components/input-number.md
+++ b/docs/content/docs/2.components/input-number.md
@@ -216,23 +216,6 @@ props:
 ---
 ::
 
-### Buttons
-
-Use the `showButtons` prop to configure the visibility of increment and decrement buttons.
-
-::component-code
----
-ignore:
-  - modelValue
-external:
-  - modelValue
-props:
-  modelValue: 0
-  showButtons: false
-  orientation: 'horizontal'
----
-::
-
 ## Examples
 
 ### With decimal format
@@ -265,6 +248,16 @@ name: 'input-number-currency-example'
 ---
 ::
 
+### Without buttons
+
+You can use the `increment` and `decrement` props to control visibility of the buttons.
+
+::component-example
+---
+name: 'input-number-without-buttons-example'
+---
+::
+
 ### Within a FormField
 
 You can use the InputNumber within a [FormField](/docs/components/form-field) component to display a label, help text, required indicator, etc.

From e7c04f166ca8295595bab9055ee470d593a85abd Mon Sep 17 00:00:00 2001
From: Jakub <jakub.michalek@freelo.io>
Date: Wed, 15 Oct 2025 07:14:53 +0200
Subject: [PATCH 10/16] fix(InputNumber): set default values for
 increment/decrement disable props

---
 src/runtime/components/InputNumber.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index feddb57a25..29beb51846 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -91,8 +91,8 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
-  disabledIncrement: false,
-  disabledDecrement: false,
+  incrementDisabled: false,
+  decrementDisabled: false,
   increment: true,
   decrement: true
 })

From ef6fcc2a6db9a018dd8e3bfe20b08920288abefd Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 17 Oct 2025 14:51:11 +0200
Subject: [PATCH 11/16] up

---
 src/runtime/components/InputNumber.vue | 6 ++----
 src/theme/input-number.ts              | 6 ++----
 2 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index 29beb51846..e7a87a653c 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -30,7 +30,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * Configure the increment button. The `color` and `size` are inherited.
    * @defaultValue { variant: 'link' }
    */
-  increment?: ButtonProps | boolean
+  increment?: boolean | ButtonProps
   /**
    * The icon displayed to increment the value.
    * @defaultValue appConfig.ui.icons.plus
@@ -43,7 +43,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
    * Configure the decrement button. The `color` and `size` are inherited.
    * @defaultValue { variant: 'link' }
    */
-  decrement?: ButtonProps | boolean
+  decrement?: boolean | ButtonProps
   /**
    * The icon displayed to decrement the value.
    * @defaultValue appConfig.ui.icons.minus
@@ -91,8 +91,6 @@ defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
-  incrementDisabled: false,
-  decrementDisabled: false,
   increment: true,
   decrement: true
 })
diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index 787780da37..1ff77dfed5 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -116,14 +116,12 @@ export default (options: Required<ModuleOptions>) => {
       increment: false,
       decrement: false,
       class: 'pe-2.5'
-    },
-    {
+    }, {
       orientation: 'horizontal',
       increment: false,
       decrement: false,
       class: 'px-2.5 text-start'
-    }
-    ],
+    }],
     defaultVariants: {
       size: 'md',
       color: 'primary',

From d0b66d9bb0e60e51ad1731a250dfd65c6cde6056 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Tue, 21 Oct 2025 16:18:36 +0200
Subject: [PATCH 12/16] up

---
 src/theme/input-number.ts | 39 ++++++++++++++++++++++++++++++++-------
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index 1ff77dfed5..a694e95143 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -74,23 +74,54 @@ export default (options: Required<ModuleOptions>) => {
     }, {
       orientation: 'horizontal',
       size: 'xs',
+      decrement: true,
       class: 'px-7'
     }, {
       orientation: 'horizontal',
       size: 'sm',
+      decrement: true,
       class: 'px-8'
     }, {
       orientation: 'horizontal',
       size: 'md',
+      decrement: true,
       class: 'px-9'
     }, {
       orientation: 'horizontal',
       size: 'lg',
+      decrement: true,
       class: 'px-10'
     }, {
       orientation: 'horizontal',
       size: 'xl',
+      decrement: true,
       class: 'px-11'
+    },
+    {
+      orientation: 'horizontal',
+      size: 'xs',
+      decrement: false,
+      class: 'pe-7'
+    }, {
+      orientation: 'horizontal',
+      size: 'sm',
+      decrement: false,
+      class: 'pe-8'
+    }, {
+      orientation: 'horizontal',
+      size: 'md',
+      decrement: false,
+      class: 'pe-9'
+    }, {
+      orientation: 'horizontal',
+      size: 'lg',
+      decrement: false,
+      class: 'pe-10'
+    }, {
+      orientation: 'horizontal',
+      size: 'xl',
+      decrement: false,
+      class: 'pe-11'
     }, {
       orientation: 'vertical',
       size: 'xs',
@@ -111,16 +142,10 @@ export default (options: Required<ModuleOptions>) => {
       orientation: 'vertical',
       size: 'xl',
       class: 'pe-11'
-    }, {
-      orientation: 'vertical',
-      increment: false,
-      decrement: false,
-      class: 'pe-2.5'
     }, {
       orientation: 'horizontal',
-      increment: false,
       decrement: false,
-      class: 'px-2.5 text-start'
+      class: 'text-start'
     }],
     defaultVariants: {
       size: 'md',

From 888a07ddac79436a220a34473325b874203ab0af Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 22 Oct 2025 19:42:40 +0200
Subject: [PATCH 13/16] up

---
 src/theme/input-number.ts | 49 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index a694e95143..3c18cf1b2d 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -75,53 +75,93 @@ export default (options: Required<ModuleOptions>) => {
       orientation: 'horizontal',
       size: 'xs',
       decrement: true,
+      increment: true,
       class: 'px-7'
     }, {
       orientation: 'horizontal',
       size: 'sm',
       decrement: true,
+      increment: true,
       class: 'px-8'
     }, {
       orientation: 'horizontal',
       size: 'md',
       decrement: true,
+      increment: true,
       class: 'px-9'
     }, {
       orientation: 'horizontal',
       size: 'lg',
       decrement: true,
+      increment: true,
       class: 'px-10'
     }, {
       orientation: 'horizontal',
       size: 'xl',
       decrement: true,
+      increment: true,
       class: 'px-11'
     },
     {
       orientation: 'horizontal',
       size: 'xs',
       decrement: false,
+      increment: true,
       class: 'pe-7'
     }, {
       orientation: 'horizontal',
       size: 'sm',
       decrement: false,
+      increment: true,
       class: 'pe-8'
     }, {
       orientation: 'horizontal',
       size: 'md',
       decrement: false,
+      increment: true,
       class: 'pe-9'
     }, {
       orientation: 'horizontal',
       size: 'lg',
       decrement: false,
+      increment: true,
       class: 'pe-10'
     }, {
       orientation: 'horizontal',
       size: 'xl',
       decrement: false,
+      increment: true,
       class: 'pe-11'
+    }, {
+      orientation: 'horizontal',
+      size: 'xs',
+      decrement: true,
+      increment: false,
+      class: 'ps-7'
+    }, {
+      orientation: 'horizontal',
+      size: 'sm',
+      decrement: true,
+      increment: false,
+      class: 'ps-8'
+    }, {
+      orientation: 'horizontal',
+      size: 'md',
+      decrement: true,
+      increment: false,
+      class: 'ps-9'
+    }, {
+      orientation: 'horizontal',
+      size: 'lg',
+      decrement: true,
+      increment: false,
+      class: 'ps-10'
+    }, {
+      orientation: 'horizontal',
+      size: 'xl',
+      decrement: true,
+      increment: false,
+      class: 'ps-11'
     }, {
       orientation: 'vertical',
       size: 'xs',
@@ -142,7 +182,14 @@ export default (options: Required<ModuleOptions>) => {
       orientation: 'vertical',
       size: 'xl',
       class: 'pe-11'
-    }, {
+    },
+    {
+      orientation: 'vertical',
+      increment: false,
+      decrement: false,
+      class: 'pe-0'
+    },
+    {
       orientation: 'horizontal',
       decrement: false,
       class: 'text-start'

From 146819a05280973dee5e318c8ff6f2227c6e2be4 Mon Sep 17 00:00:00 2001
From: J-michalek <jaku.michalek@gmail.com>
Date: Wed, 22 Oct 2025 19:46:50 +0200
Subject: [PATCH 14/16] up

---
 test/components/__snapshots__/InputNumber-vue.spec.ts.snap | 6 +++---
 test/components/__snapshots__/InputNumber.spec.ts.snap     | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index f66d44bc4b..21196649d1 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -96,7 +96,7 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with increment and decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -409,7 +409,7 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 text-start" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -420,7 +420,7 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
   <!--v-if-->
   <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index 6d1eea57ba..c4d6280ea7 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -96,7 +96,7 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with increment and decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-2.5 text-start" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
   <!--v-if-->
   <!--v-if-->
   <!--v-if-->
@@ -409,7 +409,7 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 text-start" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -420,7 +420,7 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without increment correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
   <!--v-if-->
   <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->

From 51476bd5f0c1814b6f37f7827a7c400719519d1b Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 23 Oct 2025 10:24:21 +0200
Subject: [PATCH 15/16] update optimizeDeps

---
 docs/nuxt.config.ts             | 2 +-
 playgrounds/nuxt/nuxt.config.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
index 9d28da69e2..8b6d965913 100644
--- a/docs/nuxt.config.ts
+++ b/docs/nuxt.config.ts
@@ -183,7 +183,7 @@ export default defineNuxtConfig({
   vite: {
     optimizeDeps: {
       // prevents reloading page when navigating between components
-      include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue', 'scule', 'motion-v', 'json5', 'ohash', 'shiki-transformer-color-highlight']
+      include: ['@ai-sdk/vue', '@internationalized/date', '@nuxt/content/utils', '@tanstack/vue-table', '@vercel/analytics/nuxt', '@vercel/speed-insights/nuxt', '@vue/devtools-core', '@vue/devtools-kit', '@vueuse/integrations/useFuse', '@vueuse/shared', 'ai', 'colortranslator', 'embla-carousel-auto-height', 'embla-carousel-auto-scroll', 'embla-carousel-autoplay', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-vue', 'embla-carousel-wheel-gestures', 'json5', 'motion-v', 'ohash', 'ohash/utils', 'prettier', 'reka-ui', 'reka-ui/namespaced', 'scule', 'shiki', 'shiki-stream/vue', 'shiki-transformer-color-highlight', 'shiki/engine-javascript.mjs', 'tailwind-variants', 'tailwindcss/colors', 'ufo', 'vaul-vue', 'zod']
     }
   },
 
diff --git a/playgrounds/nuxt/nuxt.config.ts b/playgrounds/nuxt/nuxt.config.ts
index 1600fdab7e..a8af836933 100644
--- a/playgrounds/nuxt/nuxt.config.ts
+++ b/playgrounds/nuxt/nuxt.config.ts
@@ -14,7 +14,7 @@ export default defineNuxtConfig({
   vite: {
     optimizeDeps: {
       // prevents reloading page when navigating between components
-      include: ['@internationalized/date', '@vueuse/shared', '@vueuse/integrations/useFuse', '@tanstack/vue-table', 'reka-ui', 'reka-ui/namespaced', 'embla-carousel-vue', 'embla-carousel-autoplay', 'embla-carousel-auto-scroll', 'embla-carousel-auto-height', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-wheel-gestures', 'colortranslator', 'tailwindcss/colors', 'tailwind-variants', 'ufo', 'zod', 'vaul-vue']
+      include: ['@ai-sdk/vue', '@internationalized/date', '@tanstack/vue-table', '@tanstack/vue-virtual', '@vue/devtools-core', '@vue/devtools-kit', '@vueuse/core', '@vueuse/integrations/useFuse', '@vueuse/shared', 'colortranslator', 'embla-carousel-auto-height', 'embla-carousel-auto-scroll', 'embla-carousel-autoplay', 'embla-carousel-class-names', 'embla-carousel-fade', 'embla-carousel-vue', 'embla-carousel-wheel-gestures', 'ohash/utils', 'reka-ui', 'reka-ui/namespaced', 'scule', 'tailwind-variants', 'tailwindcss/colors', 'ufo', 'vaul-vue', 'zod']
     }
   }
 })

From 739b249077cf2181b0bf843e472062a934b97853 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 23 Oct 2025 10:35:00 +0200
Subject: [PATCH 16/16] use prop to simplify theme

---
 src/runtime/components/InputNumber.vue        |   8 +-
 src/theme/input-number.ts                     | 100 ++---------------
 test/components/InputNumber.spec.ts           |  11 +-
 .../InputNumber-vue.spec.ts.snap              | 104 +++++++++++-------
 .../__snapshots__/InputNumber.spec.ts.snap    | 104 +++++++++++-------
 5 files changed, 156 insertions(+), 171 deletions(-)

diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index e7a87a653c..e2f02a4f95 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -117,8 +117,8 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputNumber
   highlight: highlight.value,
   orientation: props.orientation,
   fieldGroup: orientation.value,
-  increment: props.increment !== false,
-  decrement: props.decrement !== false
+  increment: props.orientation === 'vertical' ? (!!props.increment || !!props.decrement) : !!props.increment,
+  decrement: props.orientation === 'vertical' ? false : !!props.decrement
 }))
 
 const incrementIcon = computed(() => props.incrementIcon || (props.orientation === 'horizontal' ? appConfig.ui.icons.plus : appConfig.ui.icons.chevronUp))
@@ -182,7 +182,7 @@ defineExpose({
       @focus="emitFormFocus"
     />
 
-    <div v-if="increment !== false" :class="ui.increment({ class: props.ui?.increment })">
+    <div v-if="!!increment" :class="ui.increment({ class: props.ui?.increment })">
       <NumberFieldIncrement as-child :disabled="disabled || incrementDisabled">
         <slot name="increment">
           <UButton
@@ -197,7 +197,7 @@ defineExpose({
       </NumberFieldIncrement>
     </div>
 
-    <div v-if="decrement !== false" :class="ui.decrement({ class: props.ui?.decrement })">
+    <div v-if="!!decrement" :class="ui.decrement({ class: props.ui?.decrement })">
       <NumberFieldDecrement as-child :disabled="disabled || decrementDisabled">
         <slot name="decrement">
           <UButton
diff --git a/src/theme/input-number.ts b/src/theme/input-number.ts
index 3c18cf1b2d..6943d1d397 100644
--- a/src/theme/input-number.ts
+++ b/src/theme/input-number.ts
@@ -73,126 +73,48 @@ export default (options: Required<ModuleOptions>) => {
       class: 'ring ring-inset ring-inverted'
     }, {
       orientation: 'horizontal',
-      size: 'xs',
-      decrement: true,
-      increment: true,
-      class: 'px-7'
-    }, {
-      orientation: 'horizontal',
-      size: 'sm',
-      decrement: true,
-      increment: true,
-      class: 'px-8'
-    }, {
-      orientation: 'horizontal',
-      size: 'md',
-      decrement: true,
-      increment: true,
-      class: 'px-9'
-    }, {
-      orientation: 'horizontal',
-      size: 'lg',
-      decrement: true,
-      increment: true,
-      class: 'px-10'
-    }, {
-      orientation: 'horizontal',
-      size: 'xl',
-      decrement: true,
-      increment: true,
-      class: 'px-11'
-    },
-    {
-      orientation: 'horizontal',
-      size: 'xs',
-      decrement: false,
-      increment: true,
-      class: 'pe-7'
-    }, {
-      orientation: 'horizontal',
-      size: 'sm',
-      decrement: false,
-      increment: true,
-      class: 'pe-8'
-    }, {
-      orientation: 'horizontal',
-      size: 'md',
       decrement: false,
-      increment: true,
-      class: 'pe-9'
-    }, {
-      orientation: 'horizontal',
-      size: 'lg',
-      decrement: false,
-      increment: true,
-      class: 'pe-10'
-    }, {
-      orientation: 'horizontal',
-      size: 'xl',
-      decrement: false,
-      increment: true,
-      class: 'pe-11'
+      class: 'text-start'
     }, {
-      orientation: 'horizontal',
-      size: 'xs',
       decrement: true,
-      increment: false,
+      size: 'xs',
       class: 'ps-7'
     }, {
-      orientation: 'horizontal',
-      size: 'sm',
       decrement: true,
-      increment: false,
+      size: 'sm',
       class: 'ps-8'
     }, {
-      orientation: 'horizontal',
-      size: 'md',
       decrement: true,
-      increment: false,
+      size: 'md',
       class: 'ps-9'
     }, {
-      orientation: 'horizontal',
-      size: 'lg',
       decrement: true,
-      increment: false,
+      size: 'lg',
       class: 'ps-10'
     }, {
-      orientation: 'horizontal',
-      size: 'xl',
       decrement: true,
-      increment: false,
+      size: 'xl',
       class: 'ps-11'
     }, {
-      orientation: 'vertical',
+      increment: true,
       size: 'xs',
       class: 'pe-7'
     }, {
-      orientation: 'vertical',
+      increment: true,
       size: 'sm',
       class: 'pe-8'
     }, {
-      orientation: 'vertical',
+      increment: true,
       size: 'md',
       class: 'pe-9'
     }, {
-      orientation: 'vertical',
+      increment: true,
       size: 'lg',
       class: 'pe-10'
     }, {
-      orientation: 'vertical',
+      increment: true,
       size: 'xl',
       class: 'pe-11'
-    },
-    {
-      orientation: 'vertical',
-      increment: false,
-      decrement: false,
-      class: 'pe-0'
-    },
-    {
-      orientation: 'horizontal',
-      decrement: false,
-      class: 'text-start'
     }],
     defaultVariants: {
       size: 'md',
diff --git a/test/components/InputNumber.spec.ts b/test/components/InputNumber.spec.ts
index f1858b3476..cc4ef654ff 100644
--- a/test/components/InputNumber.spec.ts
+++ b/test/components/InputNumber.spec.ts
@@ -23,17 +23,20 @@ describe('InputNumber', () => {
     ['with orientation vertical', { props: { orientation: 'vertical' } }],
     ['with incrementIcon', { props: { incrementIcon: 'i-lucide-arrow-left' } }],
     ['with decrementIcon', { props: { decrementIcon: 'i-lucide-arrow-right' } }],
+    ['without increment', { props: { increment: false } }],
+    ['without increment vertical', { props: { increment: false, orientation: 'vertical' } }],
+    ['without decrement', { props: { decrement: false } }],
+    ['without decrement vertical', { props: { decrement: false, orientation: 'vertical' } }],
+    ['without increment and decrement', { props: { increment: false, decrement: false } }],
+    ['without increment and decrement vertical', { props: { increment: false, decrement: false, orientation: 'vertical' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
     ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
     ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
     ['with ariaLabel', { attrs: { 'aria-label': 'Aria label' } }],
+    ['with .optional modifier', { props: { modelModifiers: { optional: true } } }, { input: '', expected: undefined }],
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'absolute' } }],
     ['with ui', { props: { ui: { base: 'rounded-full' } } }],
-    ['with .optional modifier', { props: { modelModifiers: { optional: true } } }, { input: '', expected: undefined }],
-    ['without decrement', { props: { decrement: false } }],
-    ['without increment', { props: { increment: false } }],
-    ['with increment and decrement', { props: { increment: false, decrement: false } }],
     // Slots
     ['with increment slot', { slots: { increment: () => '+' } }],
     ['with decrement slot', { slots: { decrement: () => '-' } }]
diff --git a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
index 21196649d1..b70e1f67db 100644
--- a/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputNumber > renders with .optional modifier correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -15,7 +15,7 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -29,7 +29,7 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -43,7 +43,7 @@ exports[`InputNumber > renders with as correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -57,7 +57,7 @@ exports[`InputNumber > renders with class correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrement slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -68,7 +68,7 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -82,7 +82,7 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -95,16 +95,8 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 </div>"
 `;
 
-exports[`InputNumber > renders with increment and decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
-  <!--v-if-->
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
 exports[`InputNumber > renders with increment slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
   <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
@@ -115,7 +107,7 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with incrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -129,7 +121,7 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -143,7 +135,7 @@ exports[`InputNumber > renders with name correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -157,7 +149,7 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -171,7 +163,7 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -185,7 +177,7 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -199,7 +191,7 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -227,7 +219,7 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -241,7 +233,7 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -255,7 +247,7 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -269,7 +261,7 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -283,7 +275,7 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -297,7 +289,7 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -311,7 +303,7 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -325,7 +317,7 @@ exports[`InputNumber > renders with required correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-10" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-10 pe-10" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -339,7 +331,7 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -353,7 +345,7 @@ exports[`InputNumber > renders with size md correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-8" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-8 pe-8" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -367,7 +359,7 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-11" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-11 pe-11" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-6"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -381,7 +373,7 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-7" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-7 pe-7" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-4"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -395,7 +387,7 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9 rounded-full" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 rounded-full" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -409,7 +401,7 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 text-start" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
       <!--v-if-->
       <!--v-if-->
@@ -419,6 +411,33 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
 </div>"
 `;
 
+exports[`InputNumber > renders without decrement vertical correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <div class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`InputNumber > renders without increment and decrement correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`InputNumber > renders without increment and decrement vertical correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`InputNumber > renders without increment correctly 1`] = `
 "<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
   <!--v-if-->
@@ -429,3 +448,14 @@ exports[`InputNumber > renders without increment correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without increment vertical correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if-->
+  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" class="shrink-0 size-5"></svg>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>"
+`;
diff --git a/test/components/__snapshots__/InputNumber.spec.ts.snap b/test/components/__snapshots__/InputNumber.spec.ts.snap
index c4d6280ea7..d3db1af8f8 100644
--- a/test/components/__snapshots__/InputNumber.spec.ts.snap
+++ b/test/components/__snapshots__/InputNumber.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputNumber > renders with .optional modifier correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -15,7 +15,7 @@ exports[`InputNumber > renders with .optional modifier correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" aria-label="Aria label" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -29,7 +29,7 @@ exports[`InputNumber > renders with ariaLabel correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<section class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -43,7 +43,7 @@ exports[`InputNumber > renders with as correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with class correctly 1`] = `
-"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="inline-flex items-center absolute" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -57,7 +57,7 @@ exports[`InputNumber > renders with class correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrement slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -68,7 +68,7 @@ exports[`InputNumber > renders with decrement slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with decrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -82,7 +82,7 @@ exports[`InputNumber > renders with decrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group" data-disabled=""><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" disabled="" data-disabled="" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" disabled="" tabindex="-1" aria-label="Increment" data-disabled="" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -95,16 +95,8 @@ exports[`InputNumber > renders with disabled correctly 1`] = `
 </div>"
 `;
 
-exports[`InputNumber > renders with increment and decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
-  <!--v-if-->
-  <!--v-if-->
-  <!--v-if-->
-</div>"
-`;
-
 exports[`InputNumber > renders with increment slot correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1">+</div>
   <div class="absolute flex items-center inset-y-0 start-0 ps-1"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:minus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
@@ -115,7 +107,7 @@ exports[`InputNumber > renders with increment slot correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with incrementIcon correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:arrow-left shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -129,7 +121,7 @@ exports[`InputNumber > renders with incrementIcon correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -143,7 +135,7 @@ exports[`InputNumber > renders with name correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -157,7 +149,7 @@ exports[`InputNumber > renders with neutral variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -171,7 +163,7 @@ exports[`InputNumber > renders with neutral variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -185,7 +177,7 @@ exports[`InputNumber > renders with neutral variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -199,7 +191,7 @@ exports[`InputNumber > renders with neutral variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-muted hover:text-default active:text-default disabled:text-muted aria-disabled:text-muted focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -227,7 +219,7 @@ exports[`InputNumber > renders with orientation vertical correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" placeholder="Number..." class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -241,7 +233,7 @@ exports[`InputNumber > renders with placeholder correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -255,7 +247,7 @@ exports[`InputNumber > renders with primary variant ghost correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -269,7 +261,7 @@ exports[`InputNumber > renders with primary variant none correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -283,7 +275,7 @@ exports[`InputNumber > renders with primary variant outline correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50 text-center ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -297,7 +289,7 @@ exports[`InputNumber > renders with primary variant soft correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -311,7 +303,7 @@ exports[`InputNumber > renders with primary variant subtle correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" required="" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -325,7 +317,7 @@ exports[`InputNumber > renders with required correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-10" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-10 pe-10" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -339,7 +331,7 @@ exports[`InputNumber > renders with size lg correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -353,7 +345,7 @@ exports[`InputNumber > renders with size md correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-8" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-8 pe-8" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -367,7 +359,7 @@ exports[`InputNumber > renders with size sm correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-11" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-11 pe-11" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-base gap-2 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-2"><span class="iconify i-lucide:plus shrink-0 size-6" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -381,7 +373,7 @@ exports[`InputNumber > renders with size xl correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-7" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-7 pe-7" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-xs gap-1 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1"><span class="iconify i-lucide:plus shrink-0 size-4" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -395,7 +387,7 @@ exports[`InputNumber > renders with size xs correctly 1`] = `
 `;
 
 exports[`InputNumber > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary px-9 rounded-full" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9 pe-9 rounded-full" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -409,7 +401,7 @@ exports[`InputNumber > renders with ui correctly 1`] = `
 `;
 
 exports[`InputNumber > renders without decrement correctly 1`] = `
-"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9 text-start" value="">
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start pe-9" value="">
   <div class="absolute flex items-center inset-y-0 end-0 pe-1"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:plus shrink-0 size-5" aria-hidden="true"></span>
       <!--v-if-->
       <!--v-if-->
@@ -419,6 +411,33 @@ exports[`InputNumber > renders without decrement correctly 1`] = `
 </div>"
 `;
 
+exports[`InputNumber > renders without decrement vertical correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <div class="absolute flex items-center top-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Increment" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-up shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`InputNumber > renders without increment and decrement correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary text-start" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
+exports[`InputNumber > renders without increment and decrement vertical correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" value="">
+  <!--v-if-->
+  <!--v-if-->
+  <!--v-if-->
+</div>"
+`;
+
 exports[`InputNumber > renders without increment correctly 1`] = `
 "<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented text-center focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" value="">
   <!--v-if-->
@@ -429,3 +448,14 @@ exports[`InputNumber > renders without increment correctly 1`] = `
   <!--v-if-->
 </div>"
 `;
+
+exports[`InputNumber > renders without increment vertical correctly 1`] = `
+"<div class="relative inline-flex items-center" role="group"><input role="spinbutton" type="text" tabindex="0" inputmode="decimal" autocomplete="off" autocorrect="off" spellcheck="false" aria-roledescription="Number field" class="w-full rounded-md border-0 placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" value="">
+  <!--v-if-->
+  <div class="absolute flex items-center bottom-0 end-0 pe-1 [&amp;>button]:py-0 scale-80"><button type="button" tabindex="-1" aria-label="Decrement" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-primary hover:text-primary/75 active:text-primary/75 disabled:text-primary aria-disabled:text-primary focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary p-1.5"><span class="iconify i-lucide:chevron-down shrink-0 size-5" aria-hidden="true"></span>
+      <!--v-if-->
+      <!--v-if-->
+    </button></div>
+  <!--v-if-->
+</div>"
+`;