diff --git a/src/theme/chat-prompt.ts b/src/theme/chat-prompt.ts
index ac50def82b..86fd9ea7dc 100644
--- a/src/theme/chat-prompt.ts
+++ b/src/theme/chat-prompt.ts
@@ -7,7 +7,7 @@ const focusHighlight = (utilities: string) => ['textarea', '[contenteditable]']
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur',
+    root: 'relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm',
     header: 'flex items-center gap-1.5',
     body: 'items-start gap-1.5',
     footer: 'flex items-center justify-between gap-1.5',
diff --git a/src/theme/content/content-toc.ts b/src/theme/content/content-toc.ts
index 5346627886..a41f7dd6cb 100644
--- a/src/theme/content/content-toc.ts
+++ b/src/theme/content/content-toc.ts
@@ -2,7 +2,7 @@ import type { ModuleOptions } from '../../module'
 
 export default (options: Required<ModuleOptions>) => ({
   slots: {
-    root: 'sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]',
+    root: 'sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]',
     container: 'pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0',
     top: 'lg:shrink-0',
     bottom: 'hidden lg:flex lg:flex-col lg:shrink-0 gap-6',
diff --git a/src/theme/header.ts b/src/theme/header.ts
index e8ab658e4d..d31b0998a7 100644
--- a/src/theme/header.ts
+++ b/src/theme/header.ts
@@ -1,6 +1,6 @@
 export default {
   slots: {
-    root: 'bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50',
+    root: 'bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50',
     container: 'flex items-center justify-between gap-3 h-full',
     left: 'lg:flex-1 flex items-center gap-1.5',
     center: 'hidden lg:flex',
diff --git a/src/theme/input-date.ts b/src/theme/input-date.ts
index bc37b9b6dc..723890f174 100644
--- a/src/theme/input-date.ts
+++ b/src/theme/input-date.ts
@@ -8,7 +8,7 @@ export default (options: Required<ModuleOptions>) => {
     slots: {
       root: () => undefined,
       base: () => ['group relative inline-flex items-center rounded-md select-none', options.theme.transitions && 'transition-colors'],
-      segment: ['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', options.theme.transitions && 'transition-colors'],
+      segment: ['rounded-sm 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', options.theme.transitions && 'transition-colors'],
       separatorIcon: 'shrink-0 size-4 text-muted'
     },
     variants: {
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
index ab7e7a0275..7a845f462e 100644
--- a/src/theme/input-time.ts
+++ b/src/theme/input-time.ts
@@ -8,7 +8,7 @@ export default (options: Required<ModuleOptions>) => {
     slots: {
       root: () => undefined,
       base: () => ['group relative inline-flex items-center rounded-md select-none', options.theme.transitions && 'transition-colors'],
-      segment: ['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', options.theme.transitions && 'transition-colors'],
+      segment: ['rounded-sm 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', options.theme.transitions && 'transition-colors'],
       separatorIcon: 'shrink-0 size-4 text-muted'
     },
     variants: {
diff --git a/src/theme/table.ts b/src/theme/table.ts
index 03c74763b5..ce089b37fa 100644
--- a/src/theme/table.ts
+++ b/src/theme/table.ts
@@ -24,14 +24,14 @@ export default (options: Required<ModuleOptions>) => ({
     },
     sticky: {
       true: {
-        thead: 'sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1',
-        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1'
+        thead: 'sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1',
+        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1'
       },
       header: {
-        thead: 'sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1'
+        thead: 'sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1'
       },
       footer: {
-        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1'
+        tfoot: 'sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1'
       }
     },
     loading: {
diff --git a/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap b/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap
index f0f49a86c3..4e8a07ed3d 100644
--- a/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPrompt-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPrompt > renders with as correctly 1`] = `
-"<section data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<section data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -12,14 +12,14 @@ exports[`ChatPrompt > renders with as correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with body slot correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->Body slot
   <!--v-if-->
 </form>"
 `;
 
 exports[`ChatPrompt > renders with class correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary p-5">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary p-5">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -30,7 +30,7 @@ exports[`ChatPrompt > renders with class correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with error correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" disabled="" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -41,7 +41,7 @@ exports[`ChatPrompt > renders with error correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with footer slot correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -52,7 +52,7 @@ exports[`ChatPrompt > renders with footer slot correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with header slot correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <div data-slot="header" class="flex items-center gap-1.5">Header slot</div>
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -63,7 +63,7 @@ exports[`ChatPrompt > renders with header slot correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with placeholder correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Placeholder" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -74,7 +74,7 @@ exports[`ChatPrompt > renders with placeholder correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with ui correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -85,7 +85,7 @@ exports[`ChatPrompt > renders with ui correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant naked correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -96,7 +96,7 @@ exports[`ChatPrompt > renders with variant naked correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant outline correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -107,7 +107,7 @@ exports[`ChatPrompt > renders with variant outline correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant soft correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:outline-3">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-elevated/50 outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:outline-3">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -118,7 +118,7 @@ exports[`ChatPrompt > renders with variant soft correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant subtle correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-elevated/50 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
diff --git a/test/components/__snapshots__/ChatPrompt.spec.ts.snap b/test/components/__snapshots__/ChatPrompt.spec.ts.snap
index f0f49a86c3..4e8a07ed3d 100644
--- a/test/components/__snapshots__/ChatPrompt.spec.ts.snap
+++ b/test/components/__snapshots__/ChatPrompt.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ChatPrompt > renders with as correctly 1`] = `
-"<section data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<section data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -12,14 +12,14 @@ exports[`ChatPrompt > renders with as correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with body slot correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->Body slot
   <!--v-if-->
 </form>"
 `;
 
 exports[`ChatPrompt > renders with class correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary p-5">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary p-5">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -30,7 +30,7 @@ exports[`ChatPrompt > renders with class correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with error correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" disabled="" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -41,7 +41,7 @@ exports[`ChatPrompt > renders with error correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with footer slot correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -52,7 +52,7 @@ exports[`ChatPrompt > renders with footer slot correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with header slot correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <div data-slot="header" class="flex items-center gap-1.5">Header slot</div>
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -63,7 +63,7 @@ exports[`ChatPrompt > renders with header slot correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with placeholder correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Placeholder" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -74,7 +74,7 @@ exports[`ChatPrompt > renders with placeholder correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with ui correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -85,7 +85,7 @@ exports[`ChatPrompt > renders with ui correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant naked correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -96,7 +96,7 @@ exports[`ChatPrompt > renders with variant naked correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant outline correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-default/75 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -107,7 +107,7 @@ exports[`ChatPrompt > renders with variant outline correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant soft correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:outline-3">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-elevated/50 outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:outline-3">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
@@ -118,7 +118,7 @@ exports[`ChatPrompt > renders with variant soft correctly 1`] = `
 `;
 
 exports[`ChatPrompt > renders with variant subtle correctly 1`] = `
-"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur bg-elevated/50 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
+"<form data-slot="root" class="relative flex flex-col items-stretch gap-2 px-2.5 py-2 w-full rounded-lg backdrop-blur-sm bg-elevated/50 ring ring-default outline-primary/25 has-[textarea:focus-visible]:outline-3 has-[textarea:focus-visible]:ring-primary has-[[contenteditable]:focus-visible]:outline-3 has-[[contenteditable]:focus-visible]:ring-primary">
   <!--v-if-->
   <div data-slot="body" class="relative inline-flex items-start gap-1.5"><textarea rows="1" placeholder="Type your message here…" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed disabled:cursor-not-allowed disabled:opacity-75 transition-colors py-1.5 text-base/5 gap-1.5 text-highlighted bg-transparent focus:outline-none resize-none px-0" data-slot="base" value=""></textarea>
     <!--v-if-->
diff --git a/test/components/__snapshots__/Header-vue.spec.ts.snap b/test/components/__snapshots__/Header-vue.spec.ts.snap
index 959399fec4..c7f4870e4d 100644
--- a/test/components/__snapshots__/Header-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Header-vue.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > renders with as correctly 1`] = `
-"<section data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<section data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -19,7 +19,7 @@ exports[`Header > renders with as correctly 1`] = `
 `;
 
 exports[`Header > renders with body slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -37,7 +37,7 @@ exports[`Header > renders with body slot correctly 1`] = `
 `;
 
 exports[`Header > renders with bottom slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -55,7 +55,7 @@ exports[`Header > renders with bottom slot correctly 1`] = `
 `;
 
 exports[`Header > renders with class correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -73,7 +73,7 @@ exports[`Header > renders with class correctly 1`] = `
 `;
 
 exports[`Header > renders with content slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -91,7 +91,7 @@ exports[`Header > renders with content slot correctly 1`] = `
 `;
 
 exports[`Header > renders with default slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -109,7 +109,7 @@ exports[`Header > renders with default slot correctly 1`] = `
 `;
 
 exports[`Header > renders with left slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if-->Left slot
@@ -127,7 +127,7 @@ exports[`Header > renders with left slot correctly 1`] = `
 `;
 
 exports[`Header > renders with mode drawer correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -157,7 +157,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 `;
 
 exports[`Header > renders with mode modal correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -196,7 +196,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 `;
 
 exports[`Header > renders with mode slideover correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -233,7 +233,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 `;
 
 exports[`Header > renders with right slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -251,7 +251,7 @@ exports[`Header > renders with right slot correctly 1`] = `
 `;
 
 exports[`Header > renders with title correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Documentation" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Documentation</a>
@@ -269,7 +269,7 @@ exports[`Header > renders with title correctly 1`] = `
 `;
 
 exports[`Header > renders with title slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Title slot" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Title slot</a>
@@ -287,7 +287,7 @@ exports[`Header > renders with title slot correctly 1`] = `
 `;
 
 exports[`Header > renders with to correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/docs" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -305,7 +305,7 @@ exports[`Header > renders with to correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -323,7 +323,7 @@ exports[`Header > renders with toggle correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -338,7 +338,7 @@ exports[`Header > renders with toggle slot correctly 1`] = `
 `;
 
 exports[`Header > renders with toggleSide correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 size-5"></svg>
         <!--v-if-->
@@ -356,7 +356,7 @@ exports[`Header > renders with toggleSide correctly 1`] = `
 `;
 
 exports[`Header > renders with top slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
@@ -373,7 +373,7 @@ exports[`Header > renders with top slot correctly 1`] = `
 `;
 
 exports[`Header > renders with ui correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full gap-1.5" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -391,7 +391,7 @@ exports[`Header > renders with ui correctly 1`] = `
 `;
 
 exports[`Header > renders without toggle correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
diff --git a/test/components/__snapshots__/Header.spec.ts.snap b/test/components/__snapshots__/Header.spec.ts.snap
index 31a6a75761..5d15dd7d8c 100644
--- a/test/components/__snapshots__/Header.spec.ts.snap
+++ b/test/components/__snapshots__/Header.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Header > renders with as correctly 1`] = `
-"<section data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<section data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -19,7 +19,7 @@ exports[`Header > renders with as correctly 1`] = `
 `;
 
 exports[`Header > renders with body slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -37,7 +37,7 @@ exports[`Header > renders with body slot correctly 1`] = `
 `;
 
 exports[`Header > renders with bottom slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -55,7 +55,7 @@ exports[`Header > renders with bottom slot correctly 1`] = `
 `;
 
 exports[`Header > renders with class correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-default h-(--ui-header-height) sticky top-0 z-50 border-b-0">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -73,7 +73,7 @@ exports[`Header > renders with class correctly 1`] = `
 `;
 
 exports[`Header > renders with content slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -91,7 +91,7 @@ exports[`Header > renders with content slot correctly 1`] = `
 `;
 
 exports[`Header > renders with default slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -109,7 +109,7 @@ exports[`Header > renders with default slot correctly 1`] = `
 `;
 
 exports[`Header > renders with left slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if-->Left slot
@@ -127,7 +127,7 @@ exports[`Header > renders with left slot correctly 1`] = `
 `;
 
 exports[`Header > renders with mode drawer correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -157,7 +157,7 @@ exports[`Header > renders with mode drawer correctly 1`] = `
 `;
 
 exports[`Header > renders with mode modal correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -196,7 +196,7 @@ exports[`Header > renders with mode modal correctly 1`] = `
 `;
 
 exports[`Header > renders with mode slideover correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -233,7 +233,7 @@ exports[`Header > renders with mode slideover correctly 1`] = `
 `;
 
 exports[`Header > renders with right slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -251,7 +251,7 @@ exports[`Header > renders with right slot correctly 1`] = `
 `;
 
 exports[`Header > renders with title correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Documentation" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Documentation</a>
@@ -269,7 +269,7 @@ exports[`Header > renders with title correctly 1`] = `
 `;
 
 exports[`Header > renders with title slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Title slot" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Title slot</a>
@@ -287,7 +287,7 @@ exports[`Header > renders with title slot correctly 1`] = `
 `;
 
 exports[`Header > renders with to correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/docs" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -305,7 +305,7 @@ exports[`Header > renders with to correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -323,7 +323,7 @@ exports[`Header > renders with toggle correctly 1`] = `
 `;
 
 exports[`Header > renders with toggle slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -338,7 +338,7 @@ exports[`Header > renders with toggle slot correctly 1`] = `
 `;
 
 exports[`Header > renders with toggleSide correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5"><button type="button" data-slot="toggle" aria-label="Open menu" class="rounded-md font-medium inline-flex items-center disabled:cursor-not-allowed aria-disabled:cursor-not-allowed disabled:opacity-75 aria-disabled:opacity-75 transition-colors text-sm gap-1.5 text-default hover:bg-elevated active:bg-elevated outline-inverted/25 focus-visible:outline-3 hover:disabled:bg-transparent dark:hover:disabled:bg-transparent hover:aria-disabled:bg-transparent dark:hover:aria-disabled:bg-transparent p-1.5 lg:hidden -ms-1.5"><span class="iconify i-lucide:menu shrink-0 size-5" aria-hidden="true" data-slot="leadingIcon"></span>
         <!--v-if-->
@@ -356,7 +356,7 @@ exports[`Header > renders with toggleSide correctly 1`] = `
 `;
 
 exports[`Header > renders with top slot correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">Top slot<div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
     </div>
@@ -373,7 +373,7 @@ exports[`Header > renders with top slot correctly 1`] = `
 `;
 
 exports[`Header > renders with ui correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-full gap-1.5" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
@@ -391,7 +391,7 @@ exports[`Header > renders with ui correctly 1`] = `
 `;
 
 exports[`Header > renders without toggle correctly 1`] = `
-"<header data-slot="root" class="bg-default/75 backdrop-blur border-b border-default h-(--ui-header-height) sticky top-0 z-50">
+"<header data-slot="root" class="bg-default/75 backdrop-blur-sm border-b border-default h-(--ui-header-height) sticky top-0 z-50">
   <div class="w-full max-w-(--ui-container) mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between gap-3 h-full" data-slot="container">
     <div data-slot="left" class="lg:flex-1 flex items-center gap-1.5">
       <!--v-if--><a href="/" aria-label="Nuxt UI" data-slot="title" class="outline-primary/25 focus-visible:outline-3 rounded-md hover:text-default transition-colors shrink-0 font-bold text-xl text-highlighted flex items-end gap-1.5">Nuxt UI</a>
diff --git a/test/components/__snapshots__/InputDate-vue.spec.ts.snap b/test/components/__snapshots__/InputDate-vue.spec.ts.snap
index 390e6654a5..e50bf4c76b 100644
--- a/test/components/__snapshots__/InputDate-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputDate-vue.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`InputDate > renders with ariaLabel correctly 1`] = `
 "<div data-slot="base" aria-label="Aria label" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -14,11 +14,11 @@ exports[`InputDate > renders with ariaLabel correctly 1`] = `
 
 exports[`InputDate > renders with as correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -26,11 +26,11 @@ exports[`InputDate > renders with as correctly 1`] = `
 
 exports[`InputDate > renders with class correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -38,11 +38,11 @@ exports[`InputDate > renders with class correctly 1`] = `
 
 exports[`InputDate > renders with default slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -50,11 +50,11 @@ exports[`InputDate > renders with default slot correctly 1`] = `
 
 exports[`InputDate > renders with default value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-01">
 </div>"
@@ -62,11 +62,11 @@ exports[`InputDate > renders with default value correctly 1`] = `
 
 exports[`InputDate > renders with disabled correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" 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-9 data-[segment=month]:w-9 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" 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <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-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" disabled="" value="">
 </div>"
@@ -74,22 +74,22 @@ exports[`InputDate > renders with disabled correctly 1`] = `
 
 exports[`InputDate > renders with icon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -97,33 +97,33 @@ exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
 
 exports[`InputDate > renders with leading slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with leadingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with maxValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" max="2025-01-31" value="">
 </div>"
@@ -131,11 +131,11 @@ exports[`InputDate > renders with maxValue correctly 1`] = `
 
 exports[`InputDate > renders with minValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" min="2025-01-01" value="">
 </div>"
@@ -143,11 +143,11 @@ exports[`InputDate > renders with minValue correctly 1`] = `
 
 exports[`InputDate > renders with modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-01">
 </div>"
@@ -155,11 +155,11 @@ exports[`InputDate > renders with modelValue correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -167,11 +167,11 @@ exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -179,11 +179,11 @@ exports[`InputDate > renders with neutral variant ghost highlight correctly 1`]
 
 exports[`InputDate > renders with neutral variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -191,11 +191,11 @@ exports[`InputDate > renders with neutral variant none correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -203,11 +203,11 @@ exports[`InputDate > renders with neutral variant none highlight correctly 1`] =
 
 exports[`InputDate > renders with neutral variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -215,11 +215,11 @@ exports[`InputDate > renders with neutral variant outline correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -227,11 +227,11 @@ exports[`InputDate > renders with neutral variant outline highlight correctly 1`
 
 exports[`InputDate > renders with neutral variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -239,11 +239,11 @@ exports[`InputDate > renders with neutral variant soft correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -251,11 +251,11 @@ exports[`InputDate > renders with neutral variant soft highlight correctly 1`] =
 
 exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -263,11 +263,11 @@ exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -275,11 +275,11 @@ exports[`InputDate > renders with neutral variant subtle highlight correctly 1`]
 
 exports[`InputDate > renders with primary variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -287,11 +287,11 @@ exports[`InputDate > renders with primary variant ghost correctly 1`] = `
 
 exports[`InputDate > renders with primary variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -299,11 +299,11 @@ exports[`InputDate > renders with primary variant ghost highlight correctly 1`]
 
 exports[`InputDate > renders with primary variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -311,11 +311,11 @@ exports[`InputDate > renders with primary variant none correctly 1`] = `
 
 exports[`InputDate > renders with primary variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -323,11 +323,11 @@ exports[`InputDate > renders with primary variant none highlight correctly 1`] =
 
 exports[`InputDate > renders with primary variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -335,11 +335,11 @@ exports[`InputDate > renders with primary variant outline correctly 1`] = `
 
 exports[`InputDate > renders with primary variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -347,11 +347,11 @@ exports[`InputDate > renders with primary variant outline highlight correctly 1`
 
 exports[`InputDate > renders with primary variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -359,11 +359,11 @@ exports[`InputDate > renders with primary variant soft correctly 1`] = `
 
 exports[`InputDate > renders with primary variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -371,11 +371,11 @@ exports[`InputDate > renders with primary variant soft highlight correctly 1`] =
 
 exports[`InputDate > renders with primary variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -383,11 +383,11 @@ exports[`InputDate > renders with primary variant subtle correctly 1`] = `
 
 exports[`InputDate > renders with primary variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -395,16 +395,16 @@ exports[`InputDate > renders with primary variant subtle highlight correctly 1`]
 
 exports[`InputDate > renders with range and defaultValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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 - 2025-01-15">
 </div>"
@@ -412,16 +412,16 @@ exports[`InputDate > renders with range and defaultValue correctly 1`] = `
 
 exports[`InputDate > renders with range and modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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 - 2025-01-15">
 </div>"
@@ -429,16 +429,16 @@ exports[`InputDate > renders with range and modelValue correctly 1`] = `
 
 exports[`InputDate > renders with range correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="undefined - undefined">
 </div>"
@@ -446,11 +446,11 @@ exports[`InputDate > renders with range correctly 1`] = `
 
 exports[`InputDate > renders with readonly correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" 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-9 data-[segment=month]:w-9 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" 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -458,11 +458,11 @@ exports[`InputDate > renders with readonly correctly 1`] = `
 
 exports[`InputDate > renders with separator slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -470,16 +470,16 @@ exports[`InputDate > renders with separator slot correctly 1`] = `
 
 exports[`InputDate > renders with separatorIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="undefined - undefined">
 </div>"
@@ -487,11 +487,11 @@ exports[`InputDate > renders with separatorIcon correctly 1`] = `
 
 exports[`InputDate > renders with size lg correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base/5 gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -499,11 +499,11 @@ exports[`InputDate > renders with size lg correctly 1`] = `
 
 exports[`InputDate > renders with size md correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -511,11 +511,11 @@ exports[`InputDate > renders with size md correctly 1`] = `
 
 exports[`InputDate > renders with size sm correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm/4 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-10 focus:bg-elevated" data-segment="month">mm</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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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="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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-10 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-10 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-10 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="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-sm 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-10 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-sm 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-10 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-sm 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-10 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;" type="date" value="">
 </div>"
@@ -523,11 +523,11 @@ exports[`InputDate > renders with size sm correctly 1`] = `
 
 exports[`InputDate > renders with size xl correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 focus:bg-elevated" data-segment="month">mm</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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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="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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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="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-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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;" type="date" value="">
 </div>"
@@ -535,11 +535,11 @@ exports[`InputDate > renders with size xl correctly 1`] = `
 
 exports[`InputDate > renders with size xs correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-sm/4 gap-0.25 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-10 focus:bg-elevated" data-segment="month">mm</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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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="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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-10 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-10 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-10 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="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-sm 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-10 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-sm 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-10 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-sm 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-10 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;" type="date" value="">
 </div>"
@@ -547,33 +547,33 @@ exports[`InputDate > renders with size xs correctly 1`] = `
 
 exports[`InputDate > renders with trailing slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with trailingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></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>"
 `;
 
 exports[`InputDate > renders with ui correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
diff --git a/test/components/__snapshots__/InputDate.spec.ts.snap b/test/components/__snapshots__/InputDate.spec.ts.snap
index 092ec0e5ea..245e167ac4 100644
--- a/test/components/__snapshots__/InputDate.spec.ts.snap
+++ b/test/components/__snapshots__/InputDate.spec.ts.snap
@@ -2,11 +2,11 @@
 
 exports[`InputDate > renders with ariaLabel correctly 1`] = `
 "<div data-slot="base" aria-label="Aria label" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -14,11 +14,11 @@ exports[`InputDate > renders with ariaLabel correctly 1`] = `
 
 exports[`InputDate > renders with as correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -26,11 +26,11 @@ exports[`InputDate > renders with as correctly 1`] = `
 
 exports[`InputDate > renders with class correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -38,11 +38,11 @@ exports[`InputDate > renders with class correctly 1`] = `
 
 exports[`InputDate > renders with default slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>Default slot
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -50,11 +50,11 @@ exports[`InputDate > renders with default slot correctly 1`] = `
 
 exports[`InputDate > renders with default value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-01">
 </div>"
@@ -62,11 +62,11 @@ exports[`InputDate > renders with default value correctly 1`] = `
 
 exports[`InputDate > renders with disabled correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" 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-9 data-[segment=month]:w-9 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" 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <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-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" disabled="" value="">
 </div>"
@@ -74,22 +74,22 @@ exports[`InputDate > renders with disabled correctly 1`] = `
 
 exports[`InputDate > renders with icon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -97,33 +97,33 @@ exports[`InputDate > renders with isDateUnavailable correctly 1`] = `
 
 exports[`InputDate > renders with leading slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with leadingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with maxValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" max="2025-01-31" value="">
 </div>"
@@ -131,11 +131,11 @@ exports[`InputDate > renders with maxValue correctly 1`] = `
 
 exports[`InputDate > renders with minValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" min="2025-01-01" value="">
 </div>"
@@ -143,11 +143,11 @@ exports[`InputDate > renders with minValue correctly 1`] = `
 
 exports[`InputDate > renders with modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-01">
 </div>"
@@ -155,11 +155,11 @@ exports[`InputDate > renders with modelValue correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -167,11 +167,11 @@ exports[`InputDate > renders with neutral variant ghost correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -179,11 +179,11 @@ exports[`InputDate > renders with neutral variant ghost highlight correctly 1`]
 
 exports[`InputDate > renders with neutral variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -191,11 +191,11 @@ exports[`InputDate > renders with neutral variant none correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -203,11 +203,11 @@ exports[`InputDate > renders with neutral variant none highlight correctly 1`] =
 
 exports[`InputDate > renders with neutral variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -215,11 +215,11 @@ exports[`InputDate > renders with neutral variant outline correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -227,11 +227,11 @@ exports[`InputDate > renders with neutral variant outline highlight correctly 1`
 
 exports[`InputDate > renders with neutral variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -239,11 +239,11 @@ exports[`InputDate > renders with neutral variant soft correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -251,11 +251,11 @@ exports[`InputDate > renders with neutral variant soft highlight correctly 1`] =
 
 exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -263,11 +263,11 @@ exports[`InputDate > renders with neutral variant subtle correctly 1`] = `
 
 exports[`InputDate > renders with neutral variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -275,11 +275,11 @@ exports[`InputDate > renders with neutral variant subtle highlight correctly 1`]
 
 exports[`InputDate > renders with primary variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -287,11 +287,11 @@ exports[`InputDate > renders with primary variant ghost correctly 1`] = `
 
 exports[`InputDate > renders with primary variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -299,11 +299,11 @@ exports[`InputDate > renders with primary variant ghost highlight correctly 1`]
 
 exports[`InputDate > renders with primary variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -311,11 +311,11 @@ exports[`InputDate > renders with primary variant none correctly 1`] = `
 
 exports[`InputDate > renders with primary variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -323,11 +323,11 @@ exports[`InputDate > renders with primary variant none highlight correctly 1`] =
 
 exports[`InputDate > renders with primary variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -335,11 +335,11 @@ exports[`InputDate > renders with primary variant outline correctly 1`] = `
 
 exports[`InputDate > renders with primary variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -347,11 +347,11 @@ exports[`InputDate > renders with primary variant outline highlight correctly 1`
 
 exports[`InputDate > renders with primary variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -359,11 +359,11 @@ exports[`InputDate > renders with primary variant soft correctly 1`] = `
 
 exports[`InputDate > renders with primary variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -371,11 +371,11 @@ exports[`InputDate > renders with primary variant soft highlight correctly 1`] =
 
 exports[`InputDate > renders with primary variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -383,11 +383,11 @@ exports[`InputDate > renders with primary variant subtle correctly 1`] = `
 
 exports[`InputDate > renders with primary variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-accented" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="2025-01-15">
 </div>"
@@ -395,16 +395,16 @@ exports[`InputDate > renders with primary variant subtle highlight correctly 1`]
 
 exports[`InputDate > renders with range and defaultValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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 - 2025-01-15">
 </div>"
@@ -412,16 +412,16 @@ exports[`InputDate > renders with range and defaultValue correctly 1`] = `
 
 exports[`InputDate > renders with range and modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="1" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">2025</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="1 - January" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">1</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="15" aria-valuetext="15" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="day">15</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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 - 2025-01-15">
 </div>"
@@ -429,16 +429,16 @@ exports[`InputDate > renders with range and modelValue correctly 1`] = `
 
 exports[`InputDate > renders with range correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="undefined - undefined">
 </div>"
@@ -446,11 +446,11 @@ exports[`InputDate > renders with range correctly 1`] = `
 
 exports[`InputDate > renders with readonly correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" 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-9 data-[segment=month]:w-9 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" 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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" aria-readonly="true" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -458,11 +458,11 @@ exports[`InputDate > renders with readonly correctly 1`] = `
 
 exports[`InputDate > renders with separator slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -470,16 +470,16 @@ exports[`InputDate > renders with separator slot correctly 1`] = `
 
 exports[`InputDate > renders with separatorIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="iconify i-lucide:arrow-right shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div><span class="iconify i-lucide:arrow-right shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="day," aria-valuemin="1" aria-valuemax="31" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="day" data-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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-reka-date-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="undefined - undefined">
 </div>"
@@ -487,11 +487,11 @@ exports[`InputDate > renders with separatorIcon correctly 1`] = `
 
 exports[`InputDate > renders with size lg correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base/5 gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -499,11 +499,11 @@ exports[`InputDate > renders with size lg correctly 1`] = `
 
 exports[`InputDate > renders with size md correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
@@ -511,11 +511,11 @@ exports[`InputDate > renders with size md correctly 1`] = `
 
 exports[`InputDate > renders with size sm correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm/4 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-10 focus:bg-elevated" data-segment="month">mm</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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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="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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-10 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-10 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-10 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="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-sm 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-10 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-sm 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-10 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-sm 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-10 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;" type="date" value="">
 </div>"
@@ -523,11 +523,11 @@ exports[`InputDate > renders with size sm correctly 1`] = `
 
 exports[`InputDate > renders with size xl correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 focus:bg-elevated" data-segment="month">mm</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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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="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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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="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-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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-sm 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-10 data-[segment=month]:w-10 data-[segment=year]:w-12 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;" type="date" value="">
 </div>"
@@ -535,11 +535,11 @@ exports[`InputDate > renders with size xl correctly 1`] = `
 
 exports[`InputDate > renders with size xs correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-sm/4 gap-0.25 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-10 focus:bg-elevated" data-segment="month">mm</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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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="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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-8 data-[segment=month]:w-8 data-[segment=year]:w-10 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-10 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-10 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-10 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="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-sm 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-10 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-sm 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-10 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-sm 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-10 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;" type="date" value="">
 </div>"
@@ -547,33 +547,33 @@ exports[`InputDate > renders with size xs correctly 1`] = `
 
 exports[`InputDate > renders with trailing slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
 `;
 
 exports[`InputDate > renders with trailingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></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>"
 `;
 
 exports[`InputDate > renders with ui correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</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-9 data-[segment=month]:w-9 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="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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="year">yyyy</div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="month, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="1" aria-valuetext="Empty" data-placeholder="" data-reka-date-field-segment="month" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 data-[segment=year]:w-11 focus:bg-elevated" data-segment="month">mm</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-date-field-segment="literal" data-slot="segment" class="rounded-sm 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-9 data-[segment=month]:w-9 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="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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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-sm 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-9 data-[segment=month]:w-9 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;" type="date" value="">
 </div>"
diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index 7cdbe3945d..e0a786388a 100644
--- a/test/components/__snapshots__/InputTime-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`InputTime > renders with ariaLabel correctly 1`] = `
 "<div data-slot="base" aria-label="Aria label" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -15,12 +15,12 @@ exports[`InputTime > renders with ariaLabel correctly 1`] = `
 
 exports[`InputTime > renders with as correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -28,12 +28,12 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -41,12 +41,12 @@ exports[`InputTime > renders with class correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>Default slot
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -54,12 +54,12 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -67,12 +67,12 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -80,12 +80,12 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -93,12 +93,12 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -106,12 +106,12 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -119,10 +119,10 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -130,48 +130,48 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with leading slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="leadingIcon" class="shrink-0 text-dimmed size-5"></svg></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with max value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -179,12 +179,12 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -192,12 +192,12 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -205,12 +205,12 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -218,12 +218,12 @@ exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -231,12 +231,12 @@ exports[`InputTime > renders with neutral variant ghost highlight correctly 1`]
 
 exports[`InputTime > renders with neutral variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -244,12 +244,12 @@ exports[`InputTime > renders with neutral variant none correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -257,12 +257,12 @@ exports[`InputTime > renders with neutral variant none highlight correctly 1`] =
 
 exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -270,12 +270,12 @@ exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -283,12 +283,12 @@ exports[`InputTime > renders with neutral variant outline highlight correctly 1`
 
 exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -296,12 +296,12 @@ exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -309,12 +309,12 @@ exports[`InputTime > renders with neutral variant soft highlight correctly 1`] =
 
 exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -322,12 +322,12 @@ exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -335,12 +335,12 @@ exports[`InputTime > renders with neutral variant subtle highlight correctly 1`]
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -348,12 +348,12 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -361,12 +361,12 @@ exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with primary variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -374,12 +374,12 @@ exports[`InputTime > renders with primary variant ghost highlight correctly 1`]
 
 exports[`InputTime > renders with primary variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -387,12 +387,12 @@ exports[`InputTime > renders with primary variant none correctly 1`] = `
 
 exports[`InputTime > renders with primary variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -400,12 +400,12 @@ exports[`InputTime > renders with primary variant none highlight correctly 1`] =
 
 exports[`InputTime > renders with primary variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -413,12 +413,12 @@ exports[`InputTime > renders with primary variant outline correctly 1`] = `
 
 exports[`InputTime > renders with primary variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -426,12 +426,12 @@ exports[`InputTime > renders with primary variant outline highlight correctly 1`
 
 exports[`InputTime > renders with primary variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -439,12 +439,12 @@ exports[`InputTime > renders with primary variant soft correctly 1`] = `
 
 exports[`InputTime > renders with primary variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -452,12 +452,12 @@ exports[`InputTime > renders with primary variant soft highlight correctly 1`] =
 
 exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -465,12 +465,12 @@ exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with primary variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -478,18 +478,18 @@ exports[`InputTime > renders with primary variant subtle highlight correctly 1`]
 
 exports[`InputTime > renders with range and defaultValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00 - 14:30:00">
 </div>"
@@ -497,18 +497,18 @@ exports[`InputTime > renders with range and defaultValue correctly 1`] = `
 
 exports[`InputTime > renders with range and modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00 - 14:30:00">
 </div>"
@@ -516,18 +516,18 @@ exports[`InputTime > renders with range and modelValue correctly 1`] = `
 
 exports[`InputTime > renders with range correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="undefined - undefined">
 </div>"
@@ -535,12 +535,12 @@ exports[`InputTime > renders with range correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -548,12 +548,12 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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;" required="" value="12:30:00">
 </div>"
@@ -561,12 +561,12 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with separator slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -574,18 +574,18 @@ exports[`InputTime > renders with separator slot correctly 1`] = `
 
 exports[`InputTime > renders with separatorIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="separatorIcon" class="shrink-0 size-4 text-muted"></svg>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="undefined - undefined">
 </div>"
@@ -593,12 +593,12 @@ exports[`InputTime > renders with separatorIcon correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base/5 gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -606,12 +606,12 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -619,12 +619,12 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm/4 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></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="">
 </div>"
@@ -632,12 +632,12 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-10 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-10 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-10 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated"></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="">
 </div>"
@@ -645,12 +645,12 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-sm/4 gap-0.25 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></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="">
 </div>"
@@ -658,36 +658,36 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailing slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
   <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" viewBox="0 0 16 16" data-slot="trailingIcon" class="shrink-0 text-dimmed size-5"></svg></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with ui correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm rounded-full" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index 88fcff6dee..8031db548e 100644
--- a/test/components/__snapshots__/InputTime.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -2,12 +2,12 @@
 
 exports[`InputTime > renders with ariaLabel correctly 1`] = `
 "<div data-slot="base" aria-label="Aria label" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -15,12 +15,12 @@ exports[`InputTime > renders with ariaLabel correctly 1`] = `
 
 exports[`InputTime > renders with as correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -28,12 +28,12 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm max-w-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -41,12 +41,12 @@ exports[`InputTime > renders with class correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>Default slot
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -54,12 +54,12 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -67,12 +67,12 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated">:</div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated">:</div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -80,12 +80,12 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -93,12 +93,12 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -106,12 +106,12 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -119,10 +119,10 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -130,48 +130,48 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with leading slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5">Leading slot</span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ps-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span data-slot="leading" class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="iconify i-lucide:arrow-left shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="leadingIcon"></span></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with max value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -179,12 +179,12 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -192,12 +192,12 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -205,12 +205,12 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -218,12 +218,12 @@ exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -231,12 +231,12 @@ exports[`InputTime > renders with neutral variant ghost highlight correctly 1`]
 
 exports[`InputTime > renders with neutral variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -244,12 +244,12 @@ exports[`InputTime > renders with neutral variant none correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -257,12 +257,12 @@ exports[`InputTime > renders with neutral variant none highlight correctly 1`] =
 
 exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -270,12 +270,12 @@ exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -283,12 +283,12 @@ exports[`InputTime > renders with neutral variant outline highlight correctly 1`
 
 exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -296,12 +296,12 @@ exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-inverted/25 has-focus-visible:outline-3 ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -309,12 +309,12 @@ exports[`InputTime > renders with neutral variant soft highlight correctly 1`] =
 
 exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -322,12 +322,12 @@ exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:ring-inverted ring ring-inset ring-inverted md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -335,12 +335,12 @@ exports[`InputTime > renders with neutral variant subtle highlight correctly 1`]
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -348,12 +348,12 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -361,12 +361,12 @@ exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with primary variant ghost highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent hover:bg-elevated has-focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -374,12 +374,12 @@ exports[`InputTime > renders with primary variant ghost highlight correctly 1`]
 
 exports[`InputTime > renders with primary variant none correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -387,12 +387,12 @@ exports[`InputTime > renders with primary variant none correctly 1`] = `
 
 exports[`InputTime > renders with primary variant none highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-transparent has-focus:outline-none ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -400,12 +400,12 @@ exports[`InputTime > renders with primary variant none highlight correctly 1`] =
 
 exports[`InputTime > renders with primary variant outline correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -413,12 +413,12 @@ exports[`InputTime > renders with primary variant outline correctly 1`] = `
 
 exports[`InputTime > renders with primary variant outline highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -426,12 +426,12 @@ exports[`InputTime > renders with primary variant outline highlight correctly 1`
 
 exports[`InputTime > renders with primary variant soft correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -439,12 +439,12 @@ exports[`InputTime > renders with primary variant soft correctly 1`] = `
 
 exports[`InputTime > renders with primary variant soft highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated has-focus:bg-elevated disabled:bg-elevated/50 outline-primary/25 has-focus-visible:outline-3 ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented/50 group-hover:focus:bg-accented"></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="12:30:00">
 </div>"
@@ -452,12 +452,12 @@ exports[`InputTime > renders with primary variant soft highlight correctly 1`] =
 
 exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -465,12 +465,12 @@ exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with primary variant subtle highlight correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-elevated outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary ring ring-inset ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-accented"></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="12:30:00">
 </div>"
@@ -478,18 +478,18 @@ exports[`InputTime > renders with primary variant subtle highlight correctly 1`]
 
 exports[`InputTime > renders with range and defaultValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00 - 14:30:00">
 </div>"
@@ -497,18 +497,18 @@ exports[`InputTime > renders with range and defaultValue correctly 1`] = `
 
 exports[`InputTime > renders with range and modelValue correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="14" aria-valuetext="14 PM" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">2</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="2" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00 - 14:30:00">
 </div>"
@@ -516,18 +516,18 @@ exports[`InputTime > renders with range and modelValue correctly 1`] = `
 
 exports[`InputTime > renders with range correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:minus shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="undefined - undefined">
 </div>"
@@ -535,12 +535,12 @@ exports[`InputTime > renders with range correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" data-readonly="" dir="ltr">
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="false" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="12:30:00">
 </div>"
@@ -548,12 +548,12 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="30" aria-valuetext="30" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="12" aria-valuetext="PM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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;" required="" value="12:30:00">
 </div>"
@@ -561,12 +561,12 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with separator slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -574,18 +574,18 @@ exports[`InputTime > renders with separator slot correctly 1`] = `
 
 exports[`InputTime > renders with separatorIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:arrow-right shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" 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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="start" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div><span class="iconify i-lucide:arrow-right shrink-0 size-4 text-muted" aria-hidden="true" data-slot="separatorIcon"></span>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-reka-time-range-field-segment-type="end" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="undefined - undefined">
 </div>"
@@ -593,12 +593,12 @@ exports[`InputTime > renders with separatorIcon correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base/5 gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -606,12 +606,12 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
@@ -619,12 +619,12 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm/4 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></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="">
 </div>"
@@ -632,12 +632,12 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-base gap-0.75 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-10 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-10 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-10 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-10 focus:bg-elevated"></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="">
 </div>"
@@ -645,12 +645,12 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-sm/4 gap-0.25 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-xs" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-8 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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-8 focus:bg-elevated"></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="">
 </div>"
@@ -658,36 +658,36 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailing slot correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary pe-9 md:text-sm" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
   <!--v-if--><span data-slot="trailing" class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="iconify i-lucide:arrow-right shrink-0 text-dimmed size-5" aria-hidden="true" data-slot="trailingIcon"></span></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="">
 </div>"
 `;
 
 exports[`InputTime > renders with ui correctly 1`] = `
 "<div data-slot="base" class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-base/5 gap-0.5 text-highlighted bg-default ring ring-inset ring-accented outline-primary/25 has-focus-visible:outline-3 has-focus-visible:ring-primary md:text-sm rounded-full" role="group" dir="ltr">
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
-  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-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 not-data-[segment=literal]: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="hour, " aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="hour">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]: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="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="minute">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></div>
+  <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated" data-segment="dayPeriod">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" data-slot="segment" class="rounded-sm 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 not-data-[segment=literal]:w-9 focus:bg-elevated"></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="">
 </div>"
diff --git a/test/components/__snapshots__/Table-vue.spec.ts.snap b/test/components/__snapshots__/Table-vue.spec.ts.snap
index 7c849fd5b7..f8d1e77b7a 100644
--- a/test/components/__snapshots__/Table-vue.spec.ts.snap
+++ b/test/components/__snapshots__/Table-vue.spec.ts.snap
@@ -1873,7 +1873,7 @@ exports[`Table > renders with sticky correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto outline-primary/25 focus-visible:outline-3">
   <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1">
+    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1">
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
@@ -1983,7 +1983,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto outline-primary/25 focus-visible:outline-3">
   <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1">
+    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1">
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
@@ -2014,7 +2014,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1">
+    <tfoot data-slot="tfoot" class="sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-border-accented)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
diff --git a/test/components/__snapshots__/Table.spec.ts.snap b/test/components/__snapshots__/Table.spec.ts.snap
index fd42b32760..c73d10216b 100644
--- a/test/components/__snapshots__/Table.spec.ts.snap
+++ b/test/components/__snapshots__/Table.spec.ts.snap
@@ -1873,7 +1873,7 @@ exports[`Table > renders with sticky correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto outline-primary/25 focus-visible:outline-3">
   <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1">
+    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1">
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">Id</th>
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">Amount</th>
@@ -1983,7 +1983,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
 "<div data-slot="root" class="relative overflow-auto outline-primary/25 focus-visible:outline-3">
   <table data-slot="base" class="min-w-full overflow-clip">
     <!--v-if-->
-    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur z-1">
+    <thead data-slot="thead" class="sticky top-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1">
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" scope="col" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
           <div data-slot="root" class="relative flex items-start flex-row">
@@ -2014,7 +2014,7 @@ exports[`Table > renders with virtualize and sticky correctly 1`] = `
       <!--v-if-->
       <!--v-if-->
     </tbody>
-    <tfoot data-slot="tfoot" class="sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur z-1">
+    <tfoot data-slot="tfoot" class="sticky bottom-0 inset-x-0 bg-default/75 backdrop-blur-sm z-1">
       <tr data-slot="separator" class="absolute z-1 start-0 w-full h-px bg-(--ui-border-accented)"></tr>
       <tr data-slot="tr" class="data-[selected=true]:bg-elevated/50">
         <th data-pinned="false" data-slot="th" class="px-4 py-3.5 text-sm text-highlighted text-start font-semibold [&amp;:has([role=checkbox])]:pe-0">
diff --git a/test/components/content/__snapshots__/ContentToc.spec.ts.snap b/test/components/content/__snapshots__/ContentToc.spec.ts.snap
index 0f24c85de9..bb59d8b8a5 100644
--- a/test/components/content/__snapshots__/ContentToc.spec.ts.snap
+++ b/test/components/content/__snapshots__/ContentToc.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`ContentToc > renders with as correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<div data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<div data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -43,7 +43,7 @@ exports[`ContentToc > renders with as correctly 1`] = `
 
 exports[`ContentToc > renders with bottom slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -84,7 +84,7 @@ exports[`ContentToc > renders with bottom slot correctly 1`] = `
 
 exports[`ContentToc > renders with class correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))] lg:px-8">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))] lg:px-8">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -125,7 +125,7 @@ exports[`ContentToc > renders with class correctly 1`] = `
 
 exports[`ContentToc > renders with content slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -142,7 +142,7 @@ exports[`ContentToc > renders with content slot correctly 1`] = `
 
 exports[`ContentToc > renders with default slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">Default slot</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -183,7 +183,7 @@ exports[`ContentToc > renders with default slot correctly 1`] = `
 
 exports[`ContentToc > renders with highlight circuit variant correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -227,7 +227,7 @@ exports[`ContentToc > renders with highlight circuit variant correctly 1`] = `
 
 exports[`ContentToc > renders with highlight circuit variant neutral color correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -271,7 +271,7 @@ exports[`ContentToc > renders with highlight circuit variant neutral color corre
 
 exports[`ContentToc > renders with highlight correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -315,7 +315,7 @@ exports[`ContentToc > renders with highlight correctly 1`] = `
 
 exports[`ContentToc > renders with highlight neutral color correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -359,7 +359,7 @@ exports[`ContentToc > renders with highlight neutral color correctly 1`] = `
 
 exports[`ContentToc > renders with highlight straight variant correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -403,7 +403,7 @@ exports[`ContentToc > renders with highlight straight variant correctly 1`] = `
 
 exports[`ContentToc > renders with highlight straight variant neutral color correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -447,7 +447,7 @@ exports[`ContentToc > renders with highlight straight variant neutral color corr
 
 exports[`ContentToc > renders with leading slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden">Leading slot<span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -488,7 +488,7 @@ exports[`ContentToc > renders with leading slot correctly 1`] = `
 
 exports[`ContentToc > renders with link slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -529,7 +529,7 @@ exports[`ContentToc > renders with link slot correctly 1`] = `
 
 exports[`ContentToc > renders with links correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -570,7 +570,7 @@ exports[`ContentToc > renders with links correctly 1`] = `
 
 exports[`ContentToc > renders with neutral color correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -611,7 +611,7 @@ exports[`ContentToc > renders with neutral color correctly 1`] = `
 
 exports[`ContentToc > renders with title correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -652,7 +652,7 @@ exports[`ContentToc > renders with title correctly 1`] = `
 
 exports[`ContentToc > renders with top slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <div data-slot="top" class="lg:shrink-0">Top slot</div><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -693,7 +693,7 @@ exports[`ContentToc > renders with top slot correctly 1`] = `
 
 exports[`ContentToc > renders with trailing slot correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center">Trailing slot</span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -734,7 +734,7 @@ exports[`ContentToc > renders with trailing slot correctly 1`] = `
 
 exports[`ContentToc > renders with trailingIcon correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:plus size-5 transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">
@@ -775,7 +775,7 @@ exports[`ContentToc > renders with trailingIcon correctly 1`] = `
 
 exports[`ContentToc > renders with ui correctly 1`] = `
 "<!-- eslint-disable-next-line vue/no-template-shadow -->
-<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
+<nav data-state="closed" data-slot="root" class="sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur-sm -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 flex flex-col overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]">
   <div data-slot="container" class="pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col lg:min-h-0">
     <!--v-if--><button type="button" aria-controls="" aria-expanded="false" data-state="closed" data-slot="trigger" class="group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 rounded-sm outline-primary/25 focus-visible:outline-3 lg:shrink-0 lg:hidden"><span data-slot="title" class="truncate">On this page</span><span data-slot="trailing" class="ms-auto inline-flex gap-1.5 items-center"><span class="iconify i-lucide:chevron-down transform transition-transform duration-200 ease-out motion-reduce:transition-none shrink-0 group-data-[state=open]:rotate-180 lg:hidden size-6" aria-hidden="true" data-slot="trailingIcon"></span></span></button>
     <div data-slot="content" class="relative data-[state=open]:animate-[collapsible-down_200ms_var(--ease-out)] data-[state=closed]:animate-[collapsible-up_200ms_var(--ease-out)] data-[state=closed]:overflow-hidden focus:outline-none lg:min-h-[min(var(--list-height,8rem),8rem)] lg:overflow-y-auto lg:scrollbar-none lg:hidden" id="reka-collapsible-content-v-0-0-0" hidden="" data-state="closed" style="--reka-collapsible-content-height: 0px; --reka-collapsible-content-width: 0px;">