From cef2b555b7958272efa2dba06c6efde09375e449 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Mon, 1 Dec 2025 11:41:13 +0000
Subject: [PATCH 1/3] chore(deps): update dependency reka-ui to v2.6.1

---
 package.json   |  2 +-
 pnpm-lock.yaml | 27 +++++++++++----------------
 2 files changed, 12 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index e5b1077fde..d9fce0ecb5 100644
--- a/package.json
+++ b/package.json
@@ -154,7 +154,7 @@
     "motion-v": "^1.7.3",
     "ohash": "^2.0.11",
     "pathe": "^2.0.3",
-    "reka-ui": "2.6.0",
+    "reka-ui": "2.6.1",
     "scule": "^1.3.0",
     "tailwind-merge": "^3.4.0",
     "tailwind-variants": "^3.2.2",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a06b44d151..affd7482f1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -127,8 +127,8 @@ importers:
         specifier: ^2.0.3
         version: 2.0.3
       reka-ui:
-        specifier: 2.6.0
-        version: 2.6.0(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3))
+        specifier: 2.6.1
+        version: 2.6.1(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3))
       scule:
         specifier: ^1.3.0
         version: 1.3.0
@@ -164,7 +164,7 @@ importers:
         version: 1.1.0(typescript@5.8.3)
       vaul-vue:
         specifier: 0.4.1
-        version: 0.4.1(reka-ui@2.6.0(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3))
+        version: 0.4.1(reka-ui@2.6.1(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3))
       vue-component-type-helpers:
         specifier: ^3.1.5
         version: 3.1.5
@@ -6162,8 +6162,8 @@ packages:
   rehype-sort-attributes@5.0.1:
     resolution: {integrity: sha512-Bxo+AKUIELcnnAZwJDt5zUDDRpt4uzhfz9d0PVGhcxYWsbFj5Cv35xuWxu5r1LeYNFNhgGqsr9Q2QiIOM/Qctg==}
 
-  reka-ui@2.6.0:
-    resolution: {integrity: sha512-NrGMKrABD97l890mFS3TNUzB0BLUfbL3hh0NjcJRIUSUljb288bx3Mzo31nOyUcdiiW0HqFGXJwyCBh9cWgb0w==}
+  reka-ui@2.6.1:
+    resolution: {integrity: sha512-XK7cJDQoNuGXfCNzBBo/81Yg/OgjPwvbabnlzXG2VsdSgNsT6iIkuPBPr+C0Shs+3bb0x0lbPvgQAhMSCKm5Ww==}
     peerDependencies:
       vue: '>= 3.2.0'
 
@@ -7459,11 +7459,6 @@ packages:
     resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==}
     engines: {node: '>= 14'}
 
-  zod-to-json-schema@3.24.6:
-    resolution: {integrity: sha512-h/z3PKvcTcTetyjl1fkj79MHNEjm+HpD6NXheWjzOekY7kV+lwDYnHw+ivHkijnCSMz1yJaWBD9vu/Fcmk+vEg==}
-    peerDependencies:
-      zod: ^3.24.1
-
   zod-to-json-schema@3.25.0:
     resolution: {integrity: sha512-HvWtU2UG41LALjajJrML6uQejQhNJx+JBO9IflpSja4R03iNWfKXrj6W2h7ljuLyc1nKS+9yDyL/9tD1U/yBnQ==}
     peerDependencies:
@@ -8498,7 +8493,7 @@ snapshots:
       unist-util-visit: 5.0.0
       unplugin: 2.3.11
       zod: 3.25.76
-      zod-to-json-schema: 3.24.6(zod@3.25.76)
+      zod-to-json-schema: 3.25.0(zod@3.25.76)
     optionalDependencies:
       better-sqlite3: 12.4.6
       valibot: 1.1.0(typescript@5.8.3)
@@ -8559,7 +8554,7 @@ snapshots:
       unist-util-visit: 5.0.0
       unplugin: 2.3.11
       zod: 3.25.76
-      zod-to-json-schema: 3.24.6(zod@3.25.76)
+      zod-to-json-schema: 3.25.0(zod@3.25.76)
     optionalDependencies:
       better-sqlite3: 12.4.6
       valibot: 1.1.0(typescript@5.8.3)
@@ -14684,7 +14679,7 @@ snapshots:
       '@types/hast': 3.0.4
       unist-util-visit: 5.0.0
 
-  reka-ui@2.6.0(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3)):
+  reka-ui@2.6.1(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3)):
     dependencies:
       '@floating-ui/dom': 1.7.4
       '@floating-ui/vue': 1.1.9(vue@3.5.24(typescript@5.8.3))
@@ -15778,10 +15773,10 @@ snapshots:
 
   vary@1.1.2: {}
 
-  vaul-vue@0.4.1(reka-ui@2.6.0(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3)):
+  vaul-vue@0.4.1(reka-ui@2.6.1(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3)))(vue@3.5.24(typescript@5.8.3)):
     dependencies:
       '@vueuse/core': 10.11.1(vue@3.5.24(typescript@5.8.3))
-      reka-ui: 2.6.0(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3))
+      reka-ui: 2.6.1(typescript@5.8.3)(vue@3.5.24(typescript@5.8.3))
       vue: 3.5.24(typescript@5.8.3)
     transitivePeerDependencies:
       - '@vue/composition-api'
@@ -16189,7 +16184,7 @@ snapshots:
       compress-commons: 6.0.2
       readable-stream: 4.7.0
 
-  zod-to-json-schema@3.24.6(zod@3.25.76):
+  zod-to-json-schema@3.25.0(zod@3.25.76):
     dependencies:
       zod: 3.25.76
 

From fd649e34aff6d4798a03ad46f252aea0fcce2be7 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 1 Dec 2025 12:44:40 +0100
Subject: [PATCH 2/3] fix(PinInput): types

---
 src/runtime/components/PinInput.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/PinInput.vue b/src/runtime/components/PinInput.vue
index 40fed42da1..e339ff7ea1 100644
--- a/src/runtime/components/PinInput.vue
+++ b/src/runtime/components/PinInput.vue
@@ -118,7 +118,7 @@ defineExpose({
     :name="name"
     :placeholder="placeholder"
     :model-value="(modelValue as PinInputValue<T>)"
-    :default-value="(defaultValue as PinInputValue<T>[])"
+    :default-value="(defaultValue as PinInputValue<T>)"
     data-slot="root"
     :class="ui.root({ class: [props.ui?.root, props.class] })"
     @update:model-value="emitFormInput()"

From 15e619d1bb59fb224694b2b66fc722c01a827d07 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Mon, 1 Dec 2025 12:45:39 +0100
Subject: [PATCH 3/3] test: update

---
 .../__snapshots__/InputDate-vue.spec.ts.snap  | 60 +++++++++----------
 .../__snapshots__/InputDate.spec.ts.snap      | 60 +++++++++----------
 2 files changed, 60 insertions(+), 60 deletions(-)

diff --git a/test/components/__snapshots__/InputDate-vue.spec.ts.snap b/test/components/__snapshots__/InputDate-vue.spec.ts.snap
index 93767ce3f0..f98f4894b0 100644
--- a/test/components/__snapshots__/InputDate-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputDate-vue.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`InputDate > renders with ariaLabel correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -20,7 +20,7 @@ exports[`InputDate > renders with as correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -32,7 +32,7 @@ exports[`InputDate > renders with class correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -44,7 +44,7 @@ exports[`InputDate > renders with default slot correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -56,7 +56,7 @@ exports[`InputDate > renders with default value correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-01">
 </div>"
 `;
 
@@ -68,7 +68,7 @@ exports[`InputDate > renders with disabled correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" disabled="" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" disabled="" value="">
 </div>"
 `;
 
@@ -80,7 +80,7 @@ exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -91,7 +91,7 @@ exports[`InputDate > renders with leading slot correctly 1`] = `
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -103,7 +103,7 @@ exports[`InputDate > renders with maxValue correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" max="2025-01-31" value="">
 </div>"
 `;
 
@@ -115,7 +115,7 @@ exports[`InputDate > renders with minValue correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" min="2025-01-01" value="">
 </div>"
 `;
 
@@ -127,7 +127,7 @@ exports[`InputDate > renders with modelValue correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-01">
 </div>"
 `;
 
@@ -139,7 +139,7 @@ exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -151,7 +151,7 @@ exports[`InputDate > renders with neutral variant none correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -163,7 +163,7 @@ exports[`InputDate > renders with neutral variant outline correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -175,7 +175,7 @@ exports[`InputDate > renders with neutral variant soft correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -187,7 +187,7 @@ exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -199,7 +199,7 @@ exports[`InputDate > renders with primary variant ghost correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -211,7 +211,7 @@ exports[`InputDate > renders with primary variant none correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -223,7 +223,7 @@ exports[`InputDate > renders with primary variant outline correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -235,7 +235,7 @@ exports[`InputDate > renders with primary variant soft correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -247,7 +247,7 @@ exports[`InputDate > renders with primary variant subtle correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -276,7 +276,7 @@ exports[`InputDate > renders with readonly correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -288,7 +288,7 @@ exports[`InputDate > renders with separator slot correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -300,7 +300,7 @@ exports[`InputDate > renders with size lg correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -312,7 +312,7 @@ exports[`InputDate > renders with size md correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -324,7 +324,7 @@ exports[`InputDate > renders with size sm correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -336,7 +336,7 @@ exports[`InputDate > renders with size xl correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -348,7 +348,7 @@ exports[`InputDate > renders with size xs correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -359,7 +359,7 @@ exports[`InputDate > renders with trailing slot correctly 1`] = `
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
-  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -371,6 +371,6 @@ exports[`InputDate > renders with ui correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
diff --git a/test/components/__snapshots__/InputDate.spec.ts.snap b/test/components/__snapshots__/InputDate.spec.ts.snap
index 19b8c7e28e..7b99340c7d 100644
--- a/test/components/__snapshots__/InputDate.spec.ts.snap
+++ b/test/components/__snapshots__/InputDate.spec.ts.snap
@@ -8,7 +8,7 @@ exports[`InputDate > renders with ariaLabel correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -20,7 +20,7 @@ exports[`InputDate > renders with as correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -32,7 +32,7 @@ exports[`InputDate > renders with class correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -44,7 +44,7 @@ exports[`InputDate > renders with default slot correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -56,7 +56,7 @@ exports[`InputDate > renders with default value correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-01">
 </div>"
 `;
 
@@ -68,7 +68,7 @@ exports[`InputDate > renders with disabled correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" disabled="" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" disabled="" value="">
 </div>"
 `;
 
@@ -80,7 +80,7 @@ exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -91,7 +91,7 @@ exports[`InputDate > renders with leading slot correctly 1`] = `
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -103,7 +103,7 @@ exports[`InputDate > renders with maxValue correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" max="2025-01-31" value="">
 </div>"
 `;
 
@@ -115,7 +115,7 @@ exports[`InputDate > renders with minValue correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" min="2025-01-01" value="">
 </div>"
 `;
 
@@ -127,7 +127,7 @@ exports[`InputDate > renders with modelValue correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-01">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-01">
 </div>"
 `;
 
@@ -139,7 +139,7 @@ exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -151,7 +151,7 @@ exports[`InputDate > renders with neutral variant none correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -163,7 +163,7 @@ exports[`InputDate > renders with neutral variant outline correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -175,7 +175,7 @@ exports[`InputDate > renders with neutral variant soft correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -187,7 +187,7 @@ exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -199,7 +199,7 @@ exports[`InputDate > renders with primary variant ghost correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -211,7 +211,7 @@ exports[`InputDate > renders with primary variant none correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -223,7 +223,7 @@ exports[`InputDate > renders with primary variant outline correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -235,7 +235,7 @@ exports[`InputDate > renders with primary variant soft correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -247,7 +247,7 @@ exports[`InputDate > renders with primary variant subtle correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="2025" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="2025-01-15">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="2025-01-15">
 </div>"
 `;
 
@@ -276,7 +276,7 @@ exports[`InputDate > renders with readonly correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" aria-readonly="true" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -288,7 +288,7 @@ exports[`InputDate > renders with separator slot correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -300,7 +300,7 @@ exports[`InputDate > renders with size lg correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -312,7 +312,7 @@ exports[`InputDate > renders with size md correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -324,7 +324,7 @@ exports[`InputDate > renders with size sm correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -336,7 +336,7 @@ exports[`InputDate > renders with size xl correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-8 data-[segment=month]:w-8 data-[segment=year]:w-13 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -348,7 +348,7 @@ exports[`InputDate > renders with size xs correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-6 data-[segment=month]:w-6 data-[segment=year]:w-9 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -359,7 +359,7 @@ exports[`InputDate > renders with trailing slot correctly 1`] = `
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">dd</div>
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
-  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;
 
@@ -371,6 +371,6 @@ exports[`InputDate > renders with ui correctly 1`] = `
   <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated">/</div>
   <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="year, " aria-valuemin="1" aria-valuemax="9999" aria-valuenow="2025" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="year" data-slot="segment" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors data-[segment=day]:w-7 data-[segment=month]:w-7 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
   <!--v-if-->
-  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" value="">
+  <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal; top: -1px; left: -1px;" type="date" value="">
 </div>"
 `;