From e4c1e45f1823a0972a009f27bc5c8d09ebd7b5bc Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Fri, 24 Oct 2025 13:32:50 +0500
Subject: [PATCH 01/21] feat(InputTime): add component

---
 docs/content/docs/2.components/input-time.md  |  38 ++++
 .../nuxt/app/composables/useNavigation.ts     |   1 +
 .../nuxt/app/pages/components/input-time.vue  |  31 ++++
 src/runtime/components/InputTime.vue          | 166 ++++++++++++++++++
 src/runtime/types/index.ts                    |   1 +
 src/theme/index.ts                            |   1 +
 src/theme/input-time.ts                       |  38 ++++
 test/components/InputTime.spec.ts             |  30 ++++
 8 files changed, 306 insertions(+)
 create mode 100644 docs/content/docs/2.components/input-time.md
 create mode 100644 playgrounds/nuxt/app/pages/components/input-time.vue
 create mode 100644 src/runtime/components/InputTime.vue
 create mode 100644 src/theme/input-time.ts
 create mode 100644 test/components/InputTime.spec.ts

diff --git a/docs/content/docs/2.components/input-time.md b/docs/content/docs/2.components/input-time.md
new file mode 100644
index 0000000000..0a44f60e0d
--- /dev/null
+++ b/docs/content/docs/2.components/input-time.md
@@ -0,0 +1,38 @@
+---
+title: InputTime
+description: ''
+links:
+  - label: InputTime
+    icon: i-custom-reka-ui
+    to: https://reka-ui.com/docs/components/input-time
+  - label: GitHub
+    icon: i-simple-icons-github
+    to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputTime.vue
+navigation.badge: Soon
+---
+
+## Usage
+
+## Examples
+
+## API
+
+### Props
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index 6248b38e9c..462fb32e27 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -38,6 +38,7 @@ const components = [
   'input-menu',
   'input-number',
   'input-tags',
+  'input-time',
   'input',
   'kbd',
   'link',
diff --git a/playgrounds/nuxt/app/pages/components/input-time.vue b/playgrounds/nuxt/app/pages/components/input-time.vue
new file mode 100644
index 0000000000..b226ad869d
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/input-time.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+import theme from '#build/ui/input-number'
+
+const colors = Object.keys(theme.variants.color)
+const sizes = Object.keys(theme.variants.size)
+const variants = Object.keys(theme.variants.variant)
+
+const attrs = reactive({
+  color: [theme.defaultVariants.color],
+  size: [theme.defaultVariants.size],
+  variant: [theme.defaultVariants.variant]
+})
+
+const value = shallowRef(new Time(12, 30))
+</script>
+
+<template>
+  <Navbar>
+    <USelect v-model="attrs.color" :items="colors" multiple />
+    <USelect v-model="attrs.size" :items="sizes" multiple />
+    <USelect v-model="attrs.variant" :items="variants" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <UInputTime v-model="value" v-bind="props" />
+    <UInputTime highlight v-bind="props" />
+    <UInputTime disabled v-bind="props" />
+    <UInputTime required v-bind="props" />
+  </Matrix>
+</template>
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
new file mode 100644
index 0000000000..43ae06bd1a
--- /dev/null
+++ b/src/runtime/components/InputTime.vue
@@ -0,0 +1,166 @@
+<script lang="ts">
+import type { TimeFieldRootProps, TimeFieldRootEmits } from 'reka-ui'
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/input-time'
+import type { ComponentConfig } from '../types/tv'
+
+type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>
+
+export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'locale' | 'dir'> {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  color?: InputTime['variants']['color']
+  variant?: InputTime['variants']['variant']
+  size?: InputTime['variants']['size']
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
+  /**
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue UApp.locale.code
+   */
+  locale?: string
+  class?: any
+  ui?: InputTime['slots']
+}
+
+export interface InputTimeEmits extends TimeFieldRootEmits {
+  change: [event: Event]
+  blur: [event: FocusEvent]
+  focus: [event: FocusEvent]
+}
+
+export interface InputTimeSlots {
+  leading(props: { ui: InputTime['ui'] }): any
+  default(props: { ui: InputTime['ui'] }): any
+  trailing(props: { ui: InputTime['ui'] }): any
+}
+</script>
+
+<script setup lang="ts">
+import type { ComponentPublicInstance } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits, Primitive } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
+import { useAppConfig } from '#imports'
+import { useFieldGroup } from '../composables/useFieldGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { useLocale } from '../composables/useLocale'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<InputTimeProps>(), {
+  autofocusDelay: 0
+})
+const emits = defineEmits<InputTimeEmits>()
+const slots = defineSlots<InputTimeSlots>()
+
+const { code: codeLocale, dir } = useLocale()
+const appConfig = useAppConfig() as InputTime['AppConfig']
+
+const rootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'id', 'name', 'required'), emits)
+
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const locale = computed(() => props.locale || codeLocale.value)
+const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTime || {}) })({
+  color: color.value,
+  variant: props.variant,
+  size: inputSize.value,
+  highlight: highlight.value,
+  trailing: isTrailing.value || !!slots.trailing,
+  fieldGroup: orientation.value
+}))
+
+const inputsRef = ref<ComponentPublicInstance[]>([])
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
+
+  emitFormChange()
+  emitFormInput()
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+function onFocus(event: FocusEvent) {
+  emitFormFocus()
+  emits('focus', event)
+}
+
+function autoFocus() {
+  if (props.autofocus) {
+    inputsRef.value[0]?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
+defineExpose({
+  inputsRef
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <TimeFieldRoot
+      v-bind="{ ...rootProps, ...ariaAttrs }"
+      :id="id"
+      v-slot="{ segments }"
+      :model-value="modelValue"
+      :default-value="defaultValue"
+      :default-placeholder="defaultPlaceholder"
+      :placeholder="placeholder"
+      :required="required"
+      :disabled="disabled"
+      :locale="locale"
+      :name="name"
+      :dir="dir"
+      :class="ui.base({ class: [props.ui?.base] })"
+      @update:model-value="onUpdate"
+      @blur="onBlur"
+      @focus="onFocus"
+    >
+      <TimeFieldInput
+        v-for="(segment, index) in segments"
+        :key="segment.part"
+        :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
+        :part="segment.part"
+        :class="ui.segment({ class: props.ui?.segment })"
+      >
+        {{ segment.value }}
+      </TimeFieldInput>
+
+      <slot :ui="ui" />
+
+      <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading" :ui="ui">
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        </slot>
+      </span>
+
+      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <slot name="trailing" :ui="ui">
+          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        </slot>
+      </span>
+    </TimeFieldRoot>
+  </Primitive>
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 015f48fc9e..091f07bd05 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -54,6 +54,7 @@ export * from '../components/Input.vue'
 export * from '../components/InputMenu.vue'
 export * from '../components/InputNumber.vue'
 export * from '../components/InputTags.vue'
+export * from '../components/InputTime.vue'
 export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Main.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 2d40b33607..ff8825701b 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -52,6 +52,7 @@ export { default as input } from './input'
 export { default as inputMenu } from './input-menu'
 export { default as inputNumber } from './input-number'
 export { default as inputTags } from './input-tags'
+export { default as inputTime } from './input-time'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as main } from './main'
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
new file mode 100644
index 0000000000..bc75918066
--- /dev/null
+++ b/src/theme/input-time.ts
@@ -0,0 +1,38 @@
+import { defuFn } from 'defu'
+import type { ModuleOptions } from '../module'
+import input from './input'
+
+export default (options: Required<ModuleOptions>) => {
+  return defuFn({
+    slots: {
+      base: () => ['w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0', options.theme.transitions && 'transition-colors'],
+      segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white'
+    },
+    variants: {
+      variant: {
+        outline: 'text-highlighted bg-default ring ring-inset ring-accented',
+        soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
+        subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
+        ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+        none: 'text-highlighted bg-transparent'
+      }
+    },
+    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: ['outline', 'subtle'],
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    })), ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      highlight: true,
+      class: `ring ring-inset ring-${color}`
+    })), {
+      color: 'neutral',
+      variant: ['outline', 'subtle'],
+      class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
+    }, {
+      color: 'neutral',
+      highlight: true,
+      class: 'ring ring-inset ring-inverted'
+    }]
+  }, input(options))
+}
diff --git a/test/components/InputTime.spec.ts b/test/components/InputTime.spec.ts
new file mode 100644
index 0000000000..169f7776b0
--- /dev/null
+++ b/test/components/InputTime.spec.ts
@@ -0,0 +1,30 @@
+import { describe, it, expect } from 'vitest'
+import { axe } from 'vitest-axe'
+import { mountSuspended } from '@nuxt/test-utils/runtime'
+import InputTime from '../../src/runtime/components/InputTime.vue'
+import type { InputTimeProps, InputTimeSlots } from '../../src/runtime/components/InputTime.vue'
+import ComponentRender from '../component-render'
+
+describe('InputTime', () => {
+  const props = {}
+
+  it.each([
+    // Props
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: '' } }],
+    ['with ui', { props: { ui: {} } }],
+    // Slots
+    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputTimeProps, slots?: Partial<InputTimeSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, InputTime)
+    expect(html).toMatchSnapshot()
+  })
+
+  it('passes accessibility tests', async () => {
+    const wrapper = await mountSuspended(InputTime, {
+      props
+    })
+
+    expect(await axe(wrapper.element)).toHaveNoViolations()
+  })
+})

From dce8077b781f9c870f07881bcd87618a0f9d46ba Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Fri, 24 Oct 2025 14:30:00 +0500
Subject: [PATCH 02/21] feat(InputTime): enhance component with Time support
 and add InputTimeFormField example

---
 docs/app/components/content/ComponentCode.vue |   9 +-
 .../imput-time/InputTimeFormFieldExample.vue  |  11 ++
 docs/content/docs/2.components/input-time.md  | 163 +++++++++++++++++-
 src/runtime/components/InputTime.vue          |  17 +-
 4 files changed, 188 insertions(+), 12 deletions(-)
 create mode 100644 docs/app/components/content/examples/imput-time/InputTimeFormFieldExample.vue

diff --git a/docs/app/components/content/ComponentCode.vue b/docs/app/components/content/ComponentCode.vue
index 6dca699f58..5f018fe213 100644
--- a/docs/app/components/content/ComponentCode.vue
+++ b/docs/app/components/content/ComponentCode.vue
@@ -4,7 +4,7 @@ import type { ChipProps } from '@nuxt/ui'
 import json5 from 'json5'
 import { upperFirst, camelCase, kebabCase } from 'scule'
 import { hash } from 'ohash'
-import { CalendarDate } from '@internationalized/date'
+import { CalendarDate, Time } from '@internationalized/date'
 import * as theme from '#build/ui'
 import { get, set } from '#ui/utils'
 
@@ -14,6 +14,7 @@ interface Cast {
 }
 
 type CastDateValue = [number, number, number]
+type CastTimeValue = [number, number, number]
 
 const castMap: Record<string, Cast> = {
   'DateValue': {
@@ -37,6 +38,12 @@ const castMap: Record<string, Cast> = {
 
       return `{ start: new CalendarDate(${value.start.year}, ${value.start.month}, ${value.start.day}), end: new CalendarDate(${value.end.year}, ${value.end.month}, ${value.end.day}) }`
     }
+  },
+  'TimeValue': {
+    get: (args: CastTimeValue) => new Time(...args),
+    template: (value: Time) => {
+      return value ? `new Time(${value.hour}, ${value.minute}, ${value.second})` : 'null'
+    }
   }
 }
 
diff --git a/docs/app/components/content/examples/imput-time/InputTimeFormFieldExample.vue b/docs/app/components/content/examples/imput-time/InputTimeFormFieldExample.vue
new file mode 100644
index 0000000000..d5a607e155
--- /dev/null
+++ b/docs/app/components/content/examples/imput-time/InputTimeFormFieldExample.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+
+const time = shallowRef(new Time(12, 30, 0))
+</script>
+
+<template>
+  <UFormField label="Time" help="Specify the time" required>
+    <UInputTime v-model="time" />
+  </UFormField>
+</template>
diff --git a/docs/content/docs/2.components/input-time.md b/docs/content/docs/2.components/input-time.md
index 0a44f60e0d..c853940d1a 100644
--- a/docs/content/docs/2.components/input-time.md
+++ b/docs/content/docs/2.components/input-time.md
@@ -1,10 +1,11 @@
 ---
 title: InputTime
-description: ''
+description: 'An input for selecting a time.'
+category: form
 links:
-  - label: InputTime
+  - label: TimeField
     icon: i-custom-reka-ui
-    to: https://reka-ui.com/docs/components/input-time
+    to: https://reka-ui.com/docs/components/time-field
   - label: GitHub
     icon: i-simple-icons-github
     to: https://github.com/nuxt/ui/blob/v4/src/runtime/components/InputTime.vue
@@ -13,8 +14,164 @@ navigation.badge: Soon
 
 ## Usage
 
+Use the `v-model` directive to control the selected date.
+
+::component-code
+---
+cast:
+  modelValue: TimeValue
+ignore:
+  - modelValue
+external:
+  - modelValue
+props:
+  modelValue: [12, 30, 0]
+---
+::
+
+Use the `default-value` prop to set the initial value when you do not need to control its state.
+
+::component-code
+---
+cast:
+  defaultValue: TimeValue
+ignore:
+  - defaultValue
+external:
+  - defaultValue
+props:
+  defaultValue: [12, 30, 0]
+---
+::
+
+::note
+This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
+::
+
+### Placeholder
+
+Use the `placeholder` prop to set a placeholder text.
+
+::component-code
+---
+cast:
+  placeholder: TimeValue
+ignore:
+  - placeholder
+external:
+  - placeholder
+props:
+  placeholder: [12, 30, 0]
+---
+::
+
+### Color
+
+Use the `color` prop to change the color of the InputTime.
+
+::component-code
+---
+props:
+  color: neutral
+  highlight: true
+---
+::
+
+::note
+The `highlight` prop is used here to show the focus state. It's used internally when a validation error occurs.
+::
+
+### Variant
+
+Use the `variant` prop to change the variant of the InputTime.
+
+::component-code
+---
+cast:
+  defaultValue: TimeValue
+hide:
+  - defaultValue
+props:
+  variant: subtle
+  defaultValue: [12, 30, 0]
+---
+::
+
+### Size
+
+Use the `size` prop to change the size of the InputTime.
+
+::component-code
+---
+props:
+  size: xl
+---
+::
+
+### Icon
+
+Use the `icon` prop to show an [Icon](/docs/components/icon) inside the InputTime.
+
+::component-code
+---
+props:
+  icon: 'i-lucide-clock'
+---
+::
+
+::note
+Use the `leading` and `trailing` props to set the icon position or the `leading-icon` and `trailing-icon` props to set a different icon for each position.
+::
+
+### Avatar
+
+Use the `avatar` prop to show an [Avatar](/docs/components/avatar) inside the InputTime.
+
+::component-code
+---
+prettier: true
+props:
+  avatar:
+    src: 'https://github.com/vuejs.png'
+  size: md
+  variant: outline
+---
+::
+
+### Disabled
+
+Use the `disabled` prop to disable the InputTime.
+
+::component-code
+---
+props:
+  disabled: true
+---
+::
+
+### Hide Time Zone
+
+Use the `hideTimeZone` prop to hide the time zone of the InputTime.
+
+::component-code
+---
+props:
+  hideTimeZone: true
+---
+::
+
 ## Examples
 
+### Within a FormField
+
+You can use the InputTime within a [FormField](/docs/components/form-field) component to display a label, help text, required indicator, etc.
+
+::component-example
+---
+name: 'input-time-form-field-example'
+---
+::
+
 ## API
 
 ### Props
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 43ae06bd1a..d59bec1189 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -2,11 +2,13 @@
 import type { TimeFieldRootProps, TimeFieldRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-time'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { AvatarProps } from '../types'
 import type { ComponentConfig } from '../types/tv'
 
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>
 
-export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'locale' | 'dir'> {
+export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'locale' | 'dir'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -45,7 +47,7 @@ export interface InputTimeSlots {
 import type { ComponentPublicInstance } from 'vue'
 import { computed, onMounted, ref } from 'vue'
 import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits, Primitive } from 'reka-ui'
-import { reactivePick } from '@vueuse/core'
+import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFieldGroup } from '../composables/useFieldGroup'
 import { useComponentIcons } from '../composables/useComponentIcons'
@@ -62,7 +64,7 @@ const slots = defineSlots<InputTimeSlots>()
 const { code: codeLocale, dir } = useLocale()
 const appConfig = useAppConfig() as InputTime['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactivePick(props, 'disabled', 'id', 'name', 'required'), emits)
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps>(props)
@@ -76,6 +78,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTime ||
   variant: props.variant,
   size: inputSize.value,
   highlight: highlight.value,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
   fieldGroup: orientation.value
 }))
@@ -126,12 +129,9 @@ defineExpose({
       v-slot="{ segments }"
       :model-value="modelValue"
       :default-value="defaultValue"
-      :default-placeholder="defaultPlaceholder"
-      :placeholder="placeholder"
-      :required="required"
+      :name="name"
       :disabled="disabled"
       :locale="locale"
-      :name="name"
       :dir="dir"
       :class="ui.base({ class: [props.ui?.base] })"
       @update:model-value="onUpdate"
@@ -150,9 +150,10 @@ defineExpose({
 
       <slot :ui="ui" />
 
-      <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading" :ui="ui">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+          <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
         </slot>
       </span>
 

From 74bd1374915735dd54e8a6864f1fe1913137f783 Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Fri, 24 Oct 2025 14:40:54 +0500
Subject: [PATCH 03/21] test(InputTime): expand test cases for InputTime
 component with various props and accessibility checks

---
 test/components/InputTime.spec.ts             |  52 +-
 .../__snapshots__/InputTime-vue.spec.ts.snap  | 446 ++++++++++++++++++
 .../__snapshots__/InputTime.spec.ts.snap      | 446 ++++++++++++++++++
 3 files changed, 938 insertions(+), 6 deletions(-)
 create mode 100644 test/components/__snapshots__/InputTime-vue.spec.ts.snap
 create mode 100644 test/components/__snapshots__/InputTime.spec.ts.snap

diff --git a/test/components/InputTime.spec.ts b/test/components/InputTime.spec.ts
index 169f7776b0..3ca18d0ab0 100644
--- a/test/components/InputTime.spec.ts
+++ b/test/components/InputTime.spec.ts
@@ -1,28 +1,68 @@
-import { describe, it, expect } from 'vitest'
+import { describe, it, expect, vi, afterAll, test } from 'vitest'
 import { axe } from 'vitest-axe'
 import { mountSuspended } from '@nuxt/test-utils/runtime'
 import InputTime from '../../src/runtime/components/InputTime.vue'
 import type { InputTimeProps, InputTimeSlots } from '../../src/runtime/components/InputTime.vue'
 import ComponentRender from '../component-render'
+import theme from '#build/ui/input-time'
+import { Time } from '@internationalized/date'
 
 describe('InputTime', () => {
-  const props = {}
+  const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+  const date = new Date('2025-01-01')
+
+  vi.setSystemTime(date)
+
+  afterAll(() => {
+    vi.useRealTimers()
+  })
 
   it.each([
     // Props
+    ['with modelValue', { props: { modelValue: new Time(12, 30) } }],
+    ['with default value', { props: { defaultValue: new Time(12, 30) } }],
+    ['with placeholder', { props: { placeholder: new Time(12, 30) } }],
+    ['with disabled', { props: { disabled: true, modelValue: new Time(12, 30) } }],
+    ['with required', { props: { required: true, modelValue: new Time(12, 30) } }],
+    ['with readonly', { props: { readonly: true, modelValue: new Time(12, 30) } }],
+    ['with hour cycle 24', { props: { hourCycle: 24 as const } }],
+    ['with hour cycle 12', { props: { hourCycle: 12 as const } }],
+    ['with granularity', { props: { granularity: 'minute' as const } }],
+    ['with hide time zone', { props: { hideTimeZone: true } }],
+    ['with max value', { props: { maxValue: new Time(12, 30) } }],
+    ['with min value', { props: { minValue: new Time(12, 30) } }],
+    ['with icon', { props: { icon: 'i-lucide-clock' } }],
+    ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
+    ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant, defaultValue: new Time(12, 30) } }]),
+    ['with color neutral', { props: { color: 'neutral' } }],
     ['with as', { props: { as: 'section' } }],
-    ['with class', { props: { class: '' } }],
-    ['with ui', { props: { ui: {} } }],
+    ['with class', { props: { class: 'max-w-sm' } }],
+    ['with ui', { props: { ui: { base: 'rounded-full' } } }],
     // Slots
-    ['with default slot', { props, slots: { default: () => 'Default slot' } }]
+    ['with default slot', { slots: { default: () => 'Default slot' } }]
   ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputTimeProps, slots?: Partial<InputTimeSlots> }) => {
     const html = await ComponentRender(nameOrHtml, options, InputTime)
     expect(html).toMatchSnapshot()
   })
 
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = await mountSuspended(InputTime)
+      const time = new Time(12, 30)
+
+      await wrapper.setValue(time)
+      expect(wrapper.emitted()).toMatchObject({ 'update:modelValue': [[time]] })
+    })
+  })
+
   it('passes accessibility tests', async () => {
     const wrapper = await mountSuspended(InputTime, {
-      props
+      props: {
+        modelValue: new Time(12, 30)
+      }
     })
 
     expect(await axe(wrapper.element)).toHaveNoViolations()
diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
new file mode 100644
index 0000000000..50e23d12f8
--- /dev/null
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -0,0 +1,446 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputTime > renders with as correctly 1`] = `
+"<section class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</section>"
+`;
+
+exports[`InputTime > renders with class correctly 1`] = `
+"<div class="relative inline-flex items-center max-w-sm">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with color neutral correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with default slot correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with default value correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with disabled correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with granularity correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with hide time zone correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with icon correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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" 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>
+</div>"
+`;
+
+exports[`InputTime > renders with leadingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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" 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>
+</div>"
+`;
+
+exports[`InputTime > renders with max value correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with min value correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with modelValue correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with placeholder correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with readonly correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with required correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size lg correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size md correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size sm correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size xl correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size xs correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with trailingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+    <!--v-if--><span 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" 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>
+</div>"
+`;
+
+exports[`InputTime > renders with ui correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant ghost correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant none correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant outline correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant soft correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant subtle correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
new file mode 100644
index 0000000000..bde229a7f9
--- /dev/null
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -0,0 +1,446 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`InputTime > renders with as correctly 1`] = `
+"<section class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</section>"
+`;
+
+exports[`InputTime > renders with class correctly 1`] = `
+"<div class="relative inline-flex items-center max-w-sm">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with color neutral correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with default slot correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with default value correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with disabled correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with granularity correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with hide time zone correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with icon correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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"></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>
+</div>"
+`;
+
+exports[`InputTime > renders with leadingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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"></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>
+</div>"
+`;
+
+exports[`InputTime > renders with max value correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with min value correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with modelValue correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with placeholder correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with readonly correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with required correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size lg correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size md correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size sm correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size xl correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with size xs correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with trailingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+    <!--v-if--><span 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"></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>
+</div>"
+`;
+
+exports[`InputTime > renders with ui correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant ghost correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant none correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant outline correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant soft correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;
+
+exports[`InputTime > renders with variant subtle correctly 1`] = `
+"<div class="relative inline-flex items-center">
+  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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>
+</div>"
+`;

From 10ad31f8aff8125580e193eedda690fd8dbc3465 Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Sat, 1 Nov 2025 17:54:40 +0500
Subject: [PATCH 04/21] fix(InputTime): improve key handling and trim segment
 values in TimeFieldInput

---
 src/runtime/components/InputTime.vue |  6 +++---
 src/theme/input-time.ts              | 21 +++++++++++++++++++--
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index d59bec1189..e122e64878 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -140,12 +140,12 @@ defineExpose({
     >
       <TimeFieldInput
         v-for="(segment, index) in segments"
-        :key="segment.part"
+        :key="`${segment.part}-${index}`"
         :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
         :part="segment.part"
-        :class="ui.segment({ class: props.ui?.segment })"
+        :class="segment.part !== 'literal' ? ui.segment({ class: props.ui?.segment }) : ''"
       >
-        {{ segment.value }}
+        {{ segment.value.trim() }}
       </TimeFieldInput>
 
       <slot :ui="ui" />
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
index bc75918066..72cdff5360 100644
--- a/src/theme/input-time.ts
+++ b/src/theme/input-time.ts
@@ -5,8 +5,8 @@ import input from './input'
 export default (options: Required<ModuleOptions>) => {
   return defuFn({
     slots: {
-      base: () => ['w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0', options.theme.transitions && 'transition-colors'],
-      segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white'
+      base: () => ['w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0', options.theme.transitions && 'transition-colors'],
+      segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center'
     },
     variants: {
       variant: {
@@ -15,6 +15,23 @@ export default (options: Required<ModuleOptions>) => {
         subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
         ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
         none: 'text-highlighted bg-transparent'
+      },
+      size: {
+        xs: {
+          segment: 'w-7'
+        },
+        sm: {
+          segment: 'w-7'
+        },
+        md: {
+          segment: 'w-8'
+        },
+        lg: {
+          segment: 'w-8'
+        },
+        xl: {
+          segment: 'w-9'
+        }
       }
     },
     compoundVariants: [...(options.theme.colors || []).map((color: string) => ({

From a573428f2aa52909ef8f31700a0d77ffd61d6cda Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Sat, 1 Nov 2025 18:06:40 +0500
Subject: [PATCH 05/21] docs(InputTime): update documentation to reflect
 hourCycle prop and remove hideTimeZone section

---
 docs/content/docs/2.components/input-time.md | 23 ++++----------------
 src/runtime/components/InputTime.vue         |  1 +
 2 files changed, 5 insertions(+), 19 deletions(-)

diff --git a/docs/content/docs/2.components/input-time.md b/docs/content/docs/2.components/input-time.md
index c853940d1a..9fcb1996c9 100644
--- a/docs/content/docs/2.components/input-time.md
+++ b/docs/content/docs/2.components/input-time.md
@@ -48,20 +48,16 @@ props:
 This component relies on the [`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/index.html) package which provides objects and functions for representing and manipulating dates and times in a locale-aware manner.
 ::
 
-### Placeholder
+### Hour Cycle
 
-Use the `placeholder` prop to set a placeholder text.
+Use the `hourCycle` prop to change the hour cycle of the InputTime.
 
 ::component-code
 ---
-cast:
-  placeholder: TimeValue
 ignore:
-  - placeholder
-external:
-  - placeholder
+  - hourCycle
 props:
-  placeholder: [12, 30, 0]
+  hourCycle: 24
 ---
 ::
 
@@ -149,17 +145,6 @@ props:
 ---
 ::
 
-### Hide Time Zone
-
-Use the `hideTimeZone` prop to hide the time zone of the InputTime.
-
-::component-code
----
-props:
-  hideTimeZone: true
----
-::
-
 ## Examples
 
 ### Within a FormField
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index e122e64878..31833663a4 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -146,6 +146,7 @@ defineExpose({
         :class="segment.part !== 'literal' ? ui.segment({ class: props.ui?.segment }) : ''"
       >
         {{ segment.value.trim() }}
+        {{ console.log(segment) }}
       </TimeFieldInput>
 
       <slot :ui="ui" />

From fa460eb3aaf89aec3e34d6a601cf7414b52e51c1 Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Sat, 1 Nov 2025 18:06:53 +0500
Subject: [PATCH 06/21] refactor(InputTime): remove console.log statement from
 TimeFieldInput

---
 src/runtime/components/InputTime.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 31833663a4..e122e64878 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -146,7 +146,6 @@ defineExpose({
         :class="segment.part !== 'literal' ? ui.segment({ class: props.ui?.segment }) : ''"
       >
         {{ segment.value.trim() }}
-        {{ console.log(segment) }}
       </TimeFieldInput>
 
       <slot :ui="ui" />

From 5bba77c99d76528904c0cda74d1c712babc6b941 Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Sat, 1 Nov 2025 18:09:50 +0500
Subject: [PATCH 07/21] docs(InputTime): add defaultValue prop to InputTime
 documentation

---
 docs/content/docs/2.components/input-time.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/docs/content/docs/2.components/input-time.md b/docs/content/docs/2.components/input-time.md
index 9fcb1996c9..bded65e863 100644
--- a/docs/content/docs/2.components/input-time.md
+++ b/docs/content/docs/2.components/input-time.md
@@ -54,10 +54,16 @@ Use the `hourCycle` prop to change the hour cycle of the InputTime.
 
 ::component-code
 ---
+cast:
+  defaultValue: TimeValue
 ignore:
   - hourCycle
+  - defaultValue
+external:
+  - defaultValue
 props:
   hourCycle: 24
+  defaultValue: [16, 30, 0]
 ---
 ::
 

From 89d8249c476a62e379a259398b1af9e59d591382 Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Sat, 1 Nov 2025 18:14:22 +0500
Subject: [PATCH 08/21] test(InputTime): update snapshots to reflect changes in
 InputTime component structure and styling

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

diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index 50e23d12f8..de50619cc9 100644
--- a/test/components/__snapshots__/InputTime-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -2,13 +2,13 @@
 
 exports[`InputTime > renders with as correctly 1`] = `
 "<section class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -17,13 +17,13 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div class="relative inline-flex items-center max-w-sm">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -32,13 +32,13 @@ exports[`InputTime > renders with class correctly 1`] = `
 
 exports[`InputTime > renders with color neutral correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -47,13 +47,13 @@ exports[`InputTime > renders with color neutral correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>Default slot
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -62,13 +62,13 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -77,13 +77,13 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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>
@@ -92,13 +92,13 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -107,13 +107,13 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -122,13 +122,13 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -137,11 +137,11 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -150,13 +150,13 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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" 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>
 </div>"
@@ -164,13 +164,13 @@ exports[`InputTime > renders with icon correctly 1`] = `
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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" class="shrink-0 text-dimmed size-5"></svg></span>
+  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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" 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>
 </div>"
@@ -178,13 +178,13 @@ exports[`InputTime > renders with leadingIcon correctly 1`] = `
 
 exports[`InputTime > renders with max value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -193,13 +193,13 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -208,13 +208,13 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -223,13 +223,13 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -238,13 +238,13 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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>
@@ -253,13 +253,13 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -268,13 +268,13 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -283,13 +283,13 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -298,13 +298,13 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -313,13 +313,13 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -328,13 +328,13 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -343,13 +343,13 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div>
     <!--v-if--><span 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" 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>
 </div>"
@@ -357,13 +357,13 @@ exports[`InputTime > renders with trailingIcon correctly 1`] = `
 
 exports[`InputTime > renders with ui correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -372,13 +372,13 @@ exports[`InputTime > renders with ui correctly 1`] = `
 
 exports[`InputTime > renders with variant ghost correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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,13 +387,13 @@ exports[`InputTime > renders with variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with variant none correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -402,13 +402,13 @@ exports[`InputTime > renders with variant none correctly 1`] = `
 
 exports[`InputTime > renders with variant outline correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -417,13 +417,13 @@ exports[`InputTime > renders with variant outline correctly 1`] = `
 
 exports[`InputTime > renders with variant soft correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -432,13 +432,13 @@ exports[`InputTime > renders with variant soft correctly 1`] = `
 
 exports[`InputTime > renders with variant subtle correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index bde229a7f9..33c88993d4 100644
--- a/test/components/__snapshots__/InputTime.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -2,13 +2,13 @@
 
 exports[`InputTime > renders with as correctly 1`] = `
 "<section class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -17,13 +17,13 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div class="relative inline-flex items-center max-w-sm">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -32,13 +32,13 @@ exports[`InputTime > renders with class correctly 1`] = `
 
 exports[`InputTime > renders with color neutral correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -47,13 +47,13 @@ exports[`InputTime > renders with color neutral correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>Default slot
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -62,13 +62,13 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -77,13 +77,13 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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>
@@ -92,13 +92,13 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -107,13 +107,13 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -122,13 +122,13 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -137,11 +137,11 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -150,13 +150,13 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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"></span></span>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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"></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>
 </div>"
@@ -164,13 +164,13 @@ exports[`InputTime > renders with icon correctly 1`] = `
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div><span 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"></span></span>
+  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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"></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>
 </div>"
@@ -178,13 +178,13 @@ exports[`InputTime > renders with leadingIcon correctly 1`] = `
 
 exports[`InputTime > renders with max value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -193,13 +193,13 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -208,13 +208,13 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -223,13 +223,13 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -238,13 +238,13 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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>
@@ -253,13 +253,13 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -268,13 +268,13 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -283,13 +283,13 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -298,13 +298,13 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -313,13 +313,13 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -328,13 +328,13 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -343,13 +343,13 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div>
     <!--v-if--><span 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"></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>
 </div>"
@@ -357,13 +357,13 @@ exports[`InputTime > renders with trailingIcon correctly 1`] = `
 
 exports[`InputTime > renders with ui correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -372,13 +372,13 @@ exports[`InputTime > renders with ui correctly 1`] = `
 
 exports[`InputTime > renders with variant ghost correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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,13 +387,13 @@ exports[`InputTime > renders with variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with variant none correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -402,13 +402,13 @@ exports[`InputTime > renders with variant none correctly 1`] = `
 
 exports[`InputTime > renders with variant outline correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -417,13 +417,13 @@ exports[`InputTime > renders with variant outline correctly 1`] = `
 
 exports[`InputTime > renders with variant soft correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
@@ -432,13 +432,13 @@ exports[`InputTime > renders with variant soft correctly 1`] = `
 
 exports[`InputTime > renders with variant subtle correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white"> </div>
+  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
+    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>

From 1b0346a4882225a88e2d4a80575e13c2c4806c5a Mon Sep 17 00:00:00 2001
From: Alex <a.hywax@gmail.com>
Date: Sat, 1 Nov 2025 21:23:51 +0500
Subject: [PATCH 09/21] Apply suggestion from @vercel[bot]

Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
---
 playgrounds/nuxt/app/pages/components/input-time.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playgrounds/nuxt/app/pages/components/input-time.vue b/playgrounds/nuxt/app/pages/components/input-time.vue
index b226ad869d..468ea365e8 100644
--- a/playgrounds/nuxt/app/pages/components/input-time.vue
+++ b/playgrounds/nuxt/app/pages/components/input-time.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { Time } from '@internationalized/date'
-import theme from '#build/ui/input-number'
+import theme from '#build/ui/input-time'
 
 const colors = Object.keys(theme.variants.color)
 const sizes = Object.keys(theme.variants.size)

From 30af6047d94fbdc6fe6cacf35bfd6360a26035db Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 4 Nov 2025 17:22:37 +0100
Subject: [PATCH 10/21] clean

---
 src/runtime/components/InputTime.vue | 11 ++++++++++-
 src/theme/input-time.ts              | 28 ++--------------------------
 2 files changed, 12 insertions(+), 27 deletions(-)

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index e122e64878..c7c4a22fa9 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -1,4 +1,5 @@
 <script lang="ts">
+import type { ComponentPublicInstance } from 'vue'
 import type { TimeFieldRootProps, TimeFieldRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-time'
@@ -14,8 +15,17 @@ export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'locale'
    * @defaultValue 'div'
    */
   as?: any
+  /**
+   * @defaultValue 'primary'
+   */
   color?: InputTime['variants']['color']
+  /**
+   * @defaultValue 'outline'
+   */
   variant?: InputTime['variants']['variant']
+  /**
+   * @defaultValue 'md'
+   */
   size?: InputTime['variants']['size']
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
@@ -44,7 +54,6 @@ export interface InputTimeSlots {
 </script>
 
 <script setup lang="ts">
-import type { ComponentPublicInstance } from 'vue'
 import { computed, onMounted, ref } from 'vue'
 import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits, Primitive } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
index 72cdff5360..2a1d924289 100644
--- a/src/theme/input-time.ts
+++ b/src/theme/input-time.ts
@@ -5,17 +5,10 @@ import input from './input'
 export default (options: Required<ModuleOptions>) => {
   return defuFn({
     slots: {
-      base: () => ['w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0', options.theme.transitions && 'transition-colors'],
+      base: (prev: string) => [prev, 'select-none relative inline-flex items-center align-middle !gap-0'],
       segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center'
     },
     variants: {
-      variant: {
-        outline: 'text-highlighted bg-default ring ring-inset ring-accented',
-        soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
-        subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
-        ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
-        none: 'text-highlighted bg-transparent'
-      },
       size: {
         xs: {
           segment: 'w-7'
@@ -33,23 +26,6 @@ export default (options: Required<ModuleOptions>) => {
           segment: 'w-9'
         }
       }
-    },
-    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
-      color,
-      variant: ['outline', 'subtle'],
-      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
-    })), ...(options.theme.colors || []).map((color: string) => ({
-      color,
-      highlight: true,
-      class: `ring ring-inset ring-${color}`
-    })), {
-      color: 'neutral',
-      variant: ['outline', 'subtle'],
-      class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
-    }, {
-      color: 'neutral',
-      highlight: true,
-      class: 'ring ring-inset ring-inverted'
-    }]
+    }
   }, input(options))
 }

From 68929aed16964c4a343575b770a259e030dc2834 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 4 Nov 2025 18:09:36 +0100
Subject: [PATCH 11/21] docs: add images

---
 docs/public/components/dark/input-time.png  | Bin 0 -> 3817 bytes
 docs/public/components/light/input-time.png | Bin 0 -> 3808 bytes
 2 files changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 docs/public/components/dark/input-time.png
 create mode 100644 docs/public/components/light/input-time.png

diff --git a/docs/public/components/dark/input-time.png b/docs/public/components/dark/input-time.png
new file mode 100644
index 0000000000000000000000000000000000000000..383e736afb49f470aaf98133912903d1be0d05ce
GIT binary patch
literal 3817
zcmeHKX;hO}8opmxPk_Q$tpzEejz>xXL3Y`KhyzS3I|Nw*Xay-@t867C1R0=?Qra^F
zYGkbi%9^kwpg;mHU_rws`w|4omO|J<1d@F7G4p@UnV&O<KhM4Ap7(w4bMJlcbKiT<
z-PK72t$_vrsJJ*gdIBJWbRmYKJkn^rMGXP)0mH@dvUf7HKI8Tv$Or1#GASB+7{QAt
zTqRun!TDm=-xQT@GN?sS6CX!R=>Dt+ub*?gdE>#w^XI!){^~NG9;b6M;YvWkmo9m7
zb>~7(nw@BnWx!!pZ~(8vgw94iWPe)3o|W2_EDC2#1+0i|V_V)GZb#BezV$|jI{*~L
zGYC1gD+nEXH3-4WvIxlj2>~_7<H6$%IZlTE$&27GSNhJJFz()M-qN=+UeOrZ>XVg~
zg|5vmf0@~6gvEtbRQ3%G-GFYNg@EZ~#a{A+jh)9*7?<i5({Vklva)x-yc~t|kNoPF
zX7lg!3<6rHQ5MmL%N5*se7KVRup%gJV713Ysz>MKeFz^o+5TCH9}yZ_w!@FVL|pqS
z!tKkvGc2BWmbIR1xLb)nxHhi=N`ExZjj2+A;r(TviuB1^MSr0#J%LSpUYAqk^J^k>
z`vgM8)r{{Sb@(m+MP$+SiG5TCV|;(3V{5WTnAGs}1G!RN@e7njc&#lytp8fUYEw8`
z*^_x-YGLBlZJv9YQlSRy7YLf_b)wMc%u@8=U_%3H;3Nv%F7&POiQ!Npy9nW@LY{BN
zLbuV#Tto9>hxEv<p&?IojcuOpfF}6{^xvr9555ouN?Dvz9TW8AeqxxdDtXsf!u$4+
z+X#0qkHvGTHki^?L{4Rzh@#3q_TipBCM^ti$!b6FA&rI?7H)0r(fU_~IWc7Bbb?4{
zZK15}ETCAj0AyrD+#~JH$C)wccS8)S@9be?(|AXrqfRTppz0`Q1F2^(MV_<W%fnak
zM1M?qjjnad9P-sx_)Q82xpEXf6@ZT!)*J0jsr)uxP4GzE-`h6)i|?gLUhsb(47Ov5
ziA59pWQCm|Nj=KDt3kwOD#&*V{{n#W_))?nOdaya{FW_W&QjO0J>P#~*n_tu$6;W9
z)~=>q{4Zod_^G+FY_=Z<*X1E09dYWUyy0^5y>#FJPW6K92q87eQ0nC-Ws$Ls#y<(_
zm3JRowV<>6>QK8}DR%1xUCG`U0!AT*ocGJyI~e#^a>v_CuA7~`Asw_F!3JDXm|9P!
zKP%-aB~(^a^mgf}j`r02%Navna)zAG1JJsbSU0_1nPkqM%pcB44{8(WN>bK-tHcG#
z86B#|>h?omep>RI8+CAS&<AT`VG)2&mb&2<+l8aeX>Mk1!79CaF}(Z1GsBz|_pw<L
zvF|Y_xt5NlYlv|*AoyTAL-=`T7gc-3_$Znl0D(S4QGK9zN?nZ0*v5|#$mO&*!F`eg
zA`VIv+I-RZ2e#AtIx=bdrWn&l+`{(<#9TWNy_MOe5@C#;n5(ntoALg0<?1e2DkBn+
zT8d|VDA`u@jbW0gZaU%>;tnJ3bJY_};@C^2gj_q~ZV>iP^YV>3rp<?Q1HGl3Vxd4;
zT)=xHm1!?J1t?IBmNbF4oNtIHEs5L;3h=27f%K;$DP2=M6XPo(n7yaVZ_Y$rF7WE#
z##nilG^IL~ZdsvTOJxFk(a4FF+bGtGW?{+NOg}GIM=Q8^^(e`NzNH7EBb#SOHVGKn
zQCl{C9k2cxXR@tIey3MMP7DtJ2>wxElNxu%T@Xa_9d1JpY!oh6ae&|)0P?jdYU6#7
zDzIjJlPkU1a{;SeQfTAPwi7b%i}v7=1xf!r?ledeNpWLx?Go23V3h!&LS}@sha6&d
z@rbvH)Jdnn@WgBjk~lcC1vo<hGsL?(*czM+Xw3s4WF|o%;p7`!$|i2CHH}6poG&5O
zYo;uHH<3n3`V;`aq!~!OxH!n}uW~4B6Qzx95YYhFJz$VDO)LYZuM`qfTiXxDIC+_w
zh{lXgT6)@TH{=#rxQW|<Y5FPT)mJ==fcAF?P_$79-c|e$gOu(kvF{wzHMB0o8jM>S
zdjc9#I^{GqH+!2$MW1f{sM$PP|BL%dh<wR{0n42xlXBaO9&`STTYT1$76Y0CVs3IL
zy81!%WS}{-4rS!GeosVg;C}t~^{)57#fqD`v)uQj%H;R%N6{>pmL7p9rv-sGxPPIz
zuB99@%>+QBiWV2-AE=LcDtye6i5rRfI=A4F6|ZB>+VACO_Wx)`+g~ZNB{dSXN<N#4
zVKZMBKe`a^R-}JlN$FM`ncYccg(kN?U`~~H-1>R;uCIzXN&?ZG5oW$B&z8a}`05i;
zm}w7x1MH|DW@J6Qrp|8U>WU7}(t}%q4F<GVaGw2wPex;vNu{+@r4nFRjUiihTvQ$x
i)W@HR|EG(vkKz6l@QrStb`r8G;BwW~vECu%?mq$9@$FIo

literal 0
HcmV?d00001

diff --git a/docs/public/components/light/input-time.png b/docs/public/components/light/input-time.png
new file mode 100644
index 0000000000000000000000000000000000000000..cb35f1f578519ffdcde5e9d9ce3d9dd291ac1c4a
GIT binary patch
literal 3808
zcmeH{`B#%y9>#CN5=unq*unq?+zwDt;(!<yg;Z4VKyd*av=Oi^gvugA2w_+fz|&d=
zq(faeh!8OK5Ec_KEV9I4fr$_x#HbLq$d(YcutP|~JFo3u&>wpazdY|f-}k-uzW2G$
z_mg$e-`mL0!Vmypbl&I8WdL;GA)?wqAAVT9MZN)GciH(fUj`;2=0`%AbTWd!q&y*%
z&R6w3izo;y*A4jD&Yz?w&i=$)_onD>p2>Be25knb#Sn@0YEm3nJ8;ZG_weM|J@J#)
zh8Mob_{5%b(zT(Hv!bN**7t5ms4I_6hm`G!)D%riNL&(?#N+=XDNLwVYdxgI5dv{3
z5COn}Dl7o_UGNBesSAtlr?8lufdy}}Q`|9RCk%hdMreEjYKOD#m35UK<O@(@QuvJ<
zH7aL<VVjpuxcGIL<Yjn(`QCwxU@#H}frxh>ABAyqyl!J`ZO>@C9X>nYV?N{(cp~~(
zV`oSIRhLUL_w1=Yk;2j0DKwGbdL=R1(jLSd1nKXSQ<ftO3W~7w#^kTfEis3yujE=4
z9;MMwUOtx}p~I5Y)PdTp8;&IpY^3y?vD==MdD~$PM^+zg^*xJQAn|uX>-E_nL1a<W
zXWuR_1~$qno`pxYGW=G(x$84?0bJ8l6l84{0N3PwqKO_R?fQzbHjv#W8q1LFPe`vf
z0r*)zVPe<%QA;#o_syT)W0+v@Gyu<>+<6!EQ8BMxPn9m5tgDWL?f3y+rE`$xU`8I2
z?6JLI`f>K3N_TtZal~{b--=e@nyYLn9ZuOOGSh5-je;(%pK7KB$qC&nh(Uh<`f#X_
zVmqD$dZQ4s{qB!Ya`L}o9F(6TCPyT`lONd-)1iu%^{ql8?I=h;{tzJga6;bV8;Ou#
zM$FIrQ1{$o?Qxn=Q!iKY$csgv;~<a)lR0f^foGg=mVa)sa+bwya`k|I6NJ~z#1~Ka
za**7#hK*pb$^0Aq-8$bBs?&V%_Kc!#SFgHuv|E;WkF&Sh>z7~StfM{pMXHcnvgYI>
zJ?1OXbvNDr`T?*i>7Gk<O_&T`adO9nUQWn|a+EDEbEHXLlG>$Jx9xXF6q1w(EfvcF
z7qrU~S@7+Nhfh6?_dNh$nj^{^d!9BclM%m5dU1%!SQ@F@G#;i<NW;zY)gDc|C0CgF
zmK5beh%^mTO+#Lx+RF$Z8vwTE-WRg$J-5di9?^#$de~00I@pXQI(J>%Bgf8J+{$&{
zWs{tGv0+prrP=K3#i6THSEVdZyc+_vK5~zfjY+2%OJwstGVz-dbzB^Ffu}59=|%os
ziwf>c0qHKhl(jWST)(T5^5Y$p!0Z-p>B(bCdELA+z<RqVRT;OU;`NU!N6Dm>C#<d1
z)`P~L17e8nj$WJ;3!OP&gQhC}T&Z_#%eeX%a{%54QjTvwv}9x5J*ZRvkybKPL6{zT
za0gW@AR=Z29ZfmgI*$drfQcN!h(c!bv>|m0rFgi6esz>X5z2)sZStN_qTUP%sEdcB
zN6<4J%U9EF>D2W(9~z}>KLY~Rjymwc%5ji0vI33_BvcO9!LGg-q#)s>DN2}v>=`Dc
z5J6HL)HChbdZ!z{x2tKN4q&O;(<`dkP)R^+vtn!c(mPBZ+bU^OE!V~x{UFbe{m?AP
zbokZ5wt}HqlkpZDk8=~KcM<T8_5}#|`tF-$9F?kh|3rnT#1${0yX=wvy;8SL|9_8n
zxAD$Fh%4}a^$|zRGJ>q9%rY=ZYjv_<?@9V*Cj;I9(?OeCD(iL7x%RSBs5(N|V>*G+
zEp(g%0-m#WHmpIv1w>1o)P)n9y=d&e2DwqG9i!VLusv`(dO7aU+z5&9>TZPim7{Br
z?i;Hbg}7CGHV$eQwwS+2agtUxk@^@?b)ss4V&$d|I|i)bh!f&R3OAb$5mSk`eB)<)
zs6lNvzIh<r{Wggyx74Cs@&Wkp%dCecrGFl`k?N1>WIG|=WwZT00}i=lQc*{MUddUT
zQ4P_YH+Bz(&9{E5Qq6DUZ=6-^r%}uBOC#9XKMDQX-XGUyyR!D!!W42t+Zy5v4L}K5
zAH}lcN66qB%+K(o$dW%GL|pmbSp4chbcWznDMS1b$B0NY0@U`dKeH5c6NulNhOzLT
zn1V-N1o(0;4K+j`1~L0#)=H|WX_A_ls=cXlA4P&Gdew`&K1$uVExWe&ca(qRUZ6L@
z+graYbbGyc3SZUerVeCtMR~8DPjuBF`)p=qZrNpqc;BzAiVxpYUU*O=Dt&4<5Uh{F
z-7n3sHzY)p<>loHRs451>-~h}uAre4xc<HPA^0q7GbeKH<XU0*MECGmYH91!YO1y=
z0#)&Ij74lj$xLD`h&cqiw(lq6?+Q!$J|wJ}2Cx_$*eUK9vJ-~CZX;+=W@%)CUD9|z
Q+{xhlS^qPv(_xwa2W&VX#sB~S

literal 0
HcmV?d00001


From bc4a79d75ae2b02ad8daf39a1ded2836617ce04e Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Wed, 5 Nov 2025 12:58:03 +0500
Subject: [PATCH 12/21] fix(InputTime): update snapshot tests to reflect
 changes in component structure and styling

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

diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index de50619cc9..9f31ad3bb5 100644
--- a/test/components/__snapshots__/InputTime-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`InputTime > renders with as correctly 1`] = `
 "<section class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -17,7 +17,7 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div class="relative inline-flex items-center max-w-sm">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -32,7 +32,7 @@ exports[`InputTime > renders with class correctly 1`] = `
 
 exports[`InputTime > renders with color neutral correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -47,7 +47,7 @@ exports[`InputTime > renders with color neutral correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -62,7 +62,7 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -77,7 +77,7 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -92,7 +92,7 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -107,7 +107,7 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -122,7 +122,7 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -137,7 +137,7 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -150,7 +150,7 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -164,7 +164,7 @@ exports[`InputTime > renders with icon correctly 1`] = `
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div leadingicon="i-lucide-arrow-left" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -178,7 +178,7 @@ exports[`InputTime > renders with leadingIcon correctly 1`] = `
 
 exports[`InputTime > renders with max value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -193,7 +193,7 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -208,7 +208,7 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -223,7 +223,7 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -238,7 +238,7 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -253,7 +253,7 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -268,7 +268,7 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -283,7 +283,7 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -298,7 +298,7 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
@@ -313,7 +313,7 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
@@ -328,7 +328,7 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
@@ -343,7 +343,7 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
+  <div trailingicon="i-lucide-arrow-right" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -357,7 +357,7 @@ exports[`InputTime > renders with trailingIcon correctly 1`] = `
 
 exports[`InputTime > renders with ui correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" role="group" dir="ltr">
+  <div class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -372,7 +372,7 @@ exports[`InputTime > renders with ui correctly 1`] = `
 
 exports[`InputTime > renders with variant ghost correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -387,7 +387,7 @@ exports[`InputTime > renders with variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with variant none correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -402,7 +402,7 @@ exports[`InputTime > renders with variant none correctly 1`] = `
 
 exports[`InputTime > renders with variant outline correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -417,7 +417,7 @@ exports[`InputTime > renders with variant outline correctly 1`] = `
 
 exports[`InputTime > renders with variant soft correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -432,7 +432,7 @@ exports[`InputTime > renders with variant soft correctly 1`] = `
 
 exports[`InputTime > renders with variant subtle correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index 33c88993d4..9a4aa84527 100644
--- a/test/components/__snapshots__/InputTime.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`InputTime > renders with as correctly 1`] = `
 "<section class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -17,7 +17,7 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div class="relative inline-flex items-center max-w-sm">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -32,7 +32,7 @@ exports[`InputTime > renders with class correctly 1`] = `
 
 exports[`InputTime > renders with color neutral correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -47,7 +47,7 @@ exports[`InputTime > renders with color neutral correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -62,7 +62,7 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -77,7 +77,7 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -92,7 +92,7 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -107,7 +107,7 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -122,7 +122,7 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -137,7 +137,7 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -150,7 +150,7 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -164,7 +164,7 @@ exports[`InputTime > renders with icon correctly 1`] = `
 
 exports[`InputTime > renders with leadingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div leadingicon="i-lucide-arrow-left" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" role="group" dir="ltr">
+  <div leadingicon="i-lucide-arrow-left" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -178,7 +178,7 @@ exports[`InputTime > renders with leadingIcon correctly 1`] = `
 
 exports[`InputTime > renders with max value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -193,7 +193,7 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -208,7 +208,7 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -223,7 +223,7 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -238,7 +238,7 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" data-readonly="" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -253,7 +253,7 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -268,7 +268,7 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -283,7 +283,7 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -298,7 +298,7 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
@@ -313,7 +313,7 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
@@ -328,7 +328,7 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
@@ -343,7 +343,7 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div trailingicon="i-lucide-arrow-right" class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" role="group" dir="ltr">
+  <div trailingicon="i-lucide-arrow-right" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -357,7 +357,7 @@ exports[`InputTime > renders with trailingIcon correctly 1`] = `
 
 exports[`InputTime > renders with ui correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary rounded-full" role="group" dir="ltr">
+  <div class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
@@ -372,7 +372,7 @@ exports[`InputTime > renders with ui correctly 1`] = `
 
 exports[`InputTime > renders with variant ghost correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -387,7 +387,7 @@ exports[`InputTime > renders with variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with variant none correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -402,7 +402,7 @@ exports[`InputTime > renders with variant none correctly 1`] = `
 
 exports[`InputTime > renders with variant outline correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -417,7 +417,7 @@ exports[`InputTime > renders with variant outline correctly 1`] = `
 
 exports[`InputTime > renders with variant soft correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
@@ -432,7 +432,7 @@ exports[`InputTime > renders with variant soft correctly 1`] = `
 
 exports[`InputTime > renders with variant subtle correctly 1`] = `
 "<div class="relative inline-flex items-center">
-  <div class="w-full select-none relative group rounded-md inline-flex items-center align-middle focus:outline-none !gap-0 transition-colors px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" role="group" dir="ltr">
+  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
     <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>

From efca0ed9fe378ebc00691541ebb4c47c607ffa67 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 11:46:31 +0100
Subject: [PATCH 13/21] improve component theme

---
 .../nuxt/app/pages/components/input-time.vue  |  11 +-
 src/runtime/components/InputTime.vue          |  85 ++-
 src/theme/input-time.ts                       |  48 +-
 .../__snapshots__/InputTime-vue.spec.ts.snap  | 592 ++++++++----------
 .../__snapshots__/InputTime.spec.ts.snap      | 592 ++++++++----------
 5 files changed, 623 insertions(+), 705 deletions(-)

diff --git a/playgrounds/nuxt/app/pages/components/input-time.vue b/playgrounds/nuxt/app/pages/components/input-time.vue
index 468ea365e8..dc97343457 100644
--- a/playgrounds/nuxt/app/pages/components/input-time.vue
+++ b/playgrounds/nuxt/app/pages/components/input-time.vue
@@ -18,14 +18,21 @@ const value = shallowRef(new Time(12, 30))
 <template>
   <Navbar>
     <USelect v-model="attrs.color" :items="colors" multiple />
-    <USelect v-model="attrs.size" :items="sizes" multiple />
     <USelect v-model="attrs.variant" :items="variants" multiple />
+    <USelect v-model="attrs.size" :items="sizes" multiple />
   </Navbar>
 
   <Matrix v-slot="props" :attrs="attrs">
-    <UInputTime v-model="value" v-bind="props" />
+    <UInputTime v-model="value" autofocus v-bind="props" />
+    <UInputTime :default-value="new Time(12, 30)" v-bind="props" />
     <UInputTime highlight v-bind="props" />
     <UInputTime disabled v-bind="props" />
     <UInputTime required v-bind="props" />
+    <UInputTime icon="i-lucide-clock" v-bind="props" />
+    <UInputTime icon="i-lucide-clock" trailing v-bind="props" />
+    <UInputTime :avatar="{ src: 'https://github.com/benjamincanac.png' }" icon="i-lucide-clock" trailing v-bind="props" />
+    <UInputTime loading v-bind="props" />
+    <UInputTime loading trailing v-bind="props" />
+    <UInputTime loading icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" v-bind="props" />
   </Matrix>
 </template>
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index c7c4a22fa9..09b2f315e2 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -55,7 +55,7 @@ export interface InputTimeSlots {
 
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
-import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits, Primitive } from 'reka-ui'
+import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits } from 'reka-ui'
 import { reactiveOmit } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useFieldGroup } from '../composables/useFieldGroup'
@@ -73,7 +73,7 @@ const slots = defineSlots<InputTimeSlots>()
 const { code: codeLocale, dir } = useLocale()
 const appConfig = useAppConfig() as InputTime['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'as', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps>(props)
@@ -86,6 +86,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTime ||
   color: color.value,
   variant: props.variant,
   size: inputSize.value,
+  loading: props.loading,
   highlight: highlight.value,
   leading: isLeading.value || !!props.avatar || !!slots.leading,
   trailing: isTrailing.value || !!slots.trailing,
@@ -131,46 +132,44 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
-    <TimeFieldRoot
-      v-bind="{ ...rootProps, ...ariaAttrs }"
-      :id="id"
-      v-slot="{ segments }"
-      :model-value="modelValue"
-      :default-value="defaultValue"
-      :name="name"
-      :disabled="disabled"
-      :locale="locale"
-      :dir="dir"
-      :class="ui.base({ class: [props.ui?.base] })"
-      @update:model-value="onUpdate"
-      @blur="onBlur"
-      @focus="onFocus"
+  <TimeFieldRoot
+    v-bind="{ ...rootProps, ...ariaAttrs }"
+    :id="id"
+    v-slot="{ segments }"
+    :model-value="modelValue"
+    :default-value="defaultValue"
+    :name="name"
+    :disabled="disabled"
+    :locale="locale"
+    :dir="dir"
+    :class="ui.base({ class: [props.ui?.base, props.class] })"
+    @update:model-value="onUpdate"
+    @blur="onBlur"
+    @focus="onFocus"
+  >
+    <TimeFieldInput
+      v-for="(segment, index) in segments"
+      :key="`${segment.part}-${index}`"
+      :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
+      :part="segment.part"
+      :class="ui.segment({ class: props.ui?.segment })"
     >
-      <TimeFieldInput
-        v-for="(segment, index) in segments"
-        :key="`${segment.part}-${index}`"
-        :ref="el => (inputsRef[index] = el as ComponentPublicInstance)"
-        :part="segment.part"
-        :class="segment.part !== 'literal' ? ui.segment({ class: props.ui?.segment }) : ''"
-      >
-        {{ segment.value.trim() }}
-      </TimeFieldInput>
-
-      <slot :ui="ui" />
-
-      <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
-        <slot name="leading" :ui="ui">
-          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
-          <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
-        </slot>
-      </span>
-
-      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
-        <slot name="trailing" :ui="ui">
-          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
-        </slot>
-      </span>
-    </TimeFieldRoot>
-  </Primitive>
+      {{ segment.value.trim() }}
+    </TimeFieldInput>
+
+    <slot :ui="ui" />
+
+    <span v-if="isLeading || !!avatar || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+      <slot name="leading" :ui="ui">
+        <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        <UAvatar v-else-if="!!avatar" :size="((props.ui?.leadingAvatarSize || ui.leadingAvatarSize()) as AvatarProps['size'])" v-bind="avatar" :class="ui.leadingAvatar({ class: props.ui?.leadingAvatar })" />
+      </slot>
+    </span>
+
+    <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+      <slot name="trailing" :ui="ui">
+        <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+      </slot>
+    </span>
+  </TimeFieldRoot>
 </template>
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
index 2a1d924289..24991333cf 100644
--- a/src/theme/input-time.ts
+++ b/src/theme/input-time.ts
@@ -5,27 +5,59 @@ import input from './input'
 export default (options: Required<ModuleOptions>) => {
   return defuFn({
     slots: {
-      base: (prev: string) => [prev, 'select-none relative inline-flex items-center align-middle !gap-0'],
-      segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center'
+      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-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75', options.theme.transitions && 'transition-colors']
     },
     variants: {
       size: {
         xs: {
-          segment: 'w-7'
+          base: (prev: string) => [prev, 'gap-0.25'],
+          segment: 'not-data-[segment=literal]:w-6'
         },
         sm: {
-          segment: 'w-7'
+          base: (prev: string) => [prev, 'gap-0.5'],
+          segment: 'not-data-[segment=literal]:w-6'
         },
         md: {
-          segment: 'w-8'
+          base: (prev: string) => [prev, 'gap-0.5'],
+          segment: 'not-data-[segment=literal]:w-7'
         },
         lg: {
-          segment: 'w-8'
+          base: (prev: string) => [prev, 'gap-0.75'],
+          segment: 'not-data-[segment=literal]:w-7'
         },
         xl: {
-          segment: 'w-9'
+          base: (prev: string) => [prev, 'gap-0.75'],
+          segment: 'not-data-[segment=literal]:w-8'
         }
       }
-    }
+    },
+    compoundVariants: [{
+      variant: 'outline',
+      class: {
+        segment: 'focus:bg-elevated'
+      }
+    }, {
+      variant: 'soft',
+      class: {
+        segment: 'focus:bg-accented/50 group-hover:focus:bg-accented'
+      }
+    }, {
+      variant: 'subtle',
+      class: {
+        segment: 'focus:bg-accented'
+      }
+    }, {
+      variant: 'ghost',
+      class: {
+        segment: 'focus:bg-elevated group-hover:focus:bg-accented'
+      }
+    }, {
+      variant: 'none',
+      class: {
+        segment: 'focus:bg-elevated'
+      }
+    }]
   }, input(options))
 }
diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index 9f31ad3bb5..a37828b785 100644
--- a/test/components/__snapshots__/InputTime-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -1,446 +1,386 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputTime > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
-</section>"
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with class correctly 1`] = `
-"<div class="relative inline-flex items-center max-w-sm">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with color neutral correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with default value correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with granularity correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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" 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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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" 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 leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div leadingicon="i-lucide-arrow-left" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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" 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>
+"<div leadingicon="i-lucide-arrow-left" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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" 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 class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with min value correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with readonly correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
 `;
 
 exports[`InputTime > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div 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 focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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>"
 `;
 
 exports[`InputTime > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
 `;
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div trailingicon="i-lucide-arrow-right" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div>
-    <!--v-if--><span 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" 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>
+"<div trailingicon="i-lucide-arrow-right" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <!--v-if--><span 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" 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 class="relative inline-flex items-center">
-  <div class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant none correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index 9a4aa84527..6215dea253 100644
--- a/test/components/__snapshots__/InputTime.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -1,446 +1,386 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InputTime > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
-</section>"
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with class correctly 1`] = `
-"<div class="relative inline-flex items-center max-w-sm">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with color neutral correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with default value correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="">:</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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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="" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with granularity correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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"></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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"></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 leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div leadingicon="i-lucide-arrow-left" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div><span 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"></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>
+"<div leadingicon="i-lucide-arrow-left" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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"></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 class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with min value correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with readonly correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-sm gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-xs gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
 `;
 
 exports[`InputTime > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-3 py-2 text-base gap-2 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-9">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div 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 focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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>"
 `;
 
 exports[`InputTime > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2 py-1 text-xs gap-1 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-7">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
 `;
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div trailingicon="i-lucide-arrow-right" class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></div>
-    <!--v-if--><span 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"></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>
+"<div trailingicon="i-lucide-arrow-right" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
+  <!--v-if--><span 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"></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 class="relative inline-flex items-center">
-  <div class="w-full border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">––</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">AM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant none correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-transparent" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
 
 exports[`InputTime > renders with variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center">
-  <div class="w-full rounded-md border-0 appearance-none placeholder:text-dimmed focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors select-none relative inline-flex items-center align-middle !gap-0 px-2.5 py-1.5 text-sm gap-1.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">12</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="">:</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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">30</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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" class="focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white text-center w-8">PM</div>
-    <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class=""></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>
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;

From 1278d323ae20835fe01b4b95f129c02b001193d1 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 11:56:33 +0100
Subject: [PATCH 14/21] docs: fix dir name

---
 .../{imput-time => input-time}/InputTimeFormFieldExample.vue      | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename docs/app/components/content/examples/{imput-time => input-time}/InputTimeFormFieldExample.vue (100%)

diff --git a/docs/app/components/content/examples/imput-time/InputTimeFormFieldExample.vue b/docs/app/components/content/examples/input-time/InputTimeFormFieldExample.vue
similarity index 100%
rename from docs/app/components/content/examples/imput-time/InputTimeFormFieldExample.vue
rename to docs/app/components/content/examples/input-time/InputTimeFormFieldExample.vue

From f36ff83deb60ce1b55bb88cd7356f99f73571653 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 12:17:50 +0100
Subject: [PATCH 15/21] fix: ignore `asChild`

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

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 09b2f315e2..c4c1fe41b3 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -9,7 +9,7 @@ import type { ComponentConfig } from '../types/tv'
 
 type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>
 
-export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'locale' | 'dir'>, UseComponentIconsProps {
+export interface InputTimeProps extends Omit<TimeFieldRootProps, 'as' | 'asChild' | 'locale' | 'dir'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'

From 67278386669ab50dbf8f4b6980352b93192baaab Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 12:17:59 +0100
Subject: [PATCH 16/21] test: update

---
 test/components/InputTime.spec.ts             |   5 +-
 .../__snapshots__/InputTime-vue.spec.ts.snap  | 143 ++++++++++++++++++
 .../__snapshots__/InputTime.spec.ts.snap      | 143 ++++++++++++++++++
 3 files changed, 289 insertions(+), 2 deletions(-)

diff --git a/test/components/InputTime.spec.ts b/test/components/InputTime.spec.ts
index 3ca18d0ab0..78ce1ae8fa 100644
--- a/test/components/InputTime.spec.ts
+++ b/test/components/InputTime.spec.ts
@@ -36,8 +36,9 @@ describe('InputTime', () => {
     ['with leadingIcon', { props: { leadingIcon: 'i-lucide-arrow-left' } }],
     ['with trailingIcon', { props: { trailingIcon: 'i-lucide-arrow-right' } }],
     ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
-    ...variants.map((variant: string) => [`with variant ${variant}`, { props: { variant, defaultValue: new Time(12, 30) } }]),
-    ['with color neutral', { props: { color: 'neutral' } }],
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant, defaultValue: new Time(12, 30) } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral', defaultValue: new Time(12, 30) } }]),
+    ['with ariaLabel', { attrs: { 'aria-label': 'Aria label' } }],
     ['with as', { props: { as: 'section' } }],
     ['with class', { props: { class: 'max-w-sm' } }],
     ['with ui', { props: { ui: { base: 'rounded-full' } } }],
diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index a37828b785..aab70224e1 100644
--- a/test/components/__snapshots__/InputTime-vue.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -1,5 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`InputTime > renders with ariaLabel correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
 exports[`InputTime > renders with as correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
@@ -191,6 +204,71 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 </div>"
 `;
 
+exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant none correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant outline correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant soft correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
@@ -204,6 +282,71 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 </div>"
 `;
 
+exports[`InputTime > renders with primary variant ghost correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant none correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant outline correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant soft correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant subtle correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index 6215dea253..2b10d4a7bc 100644
--- a/test/components/__snapshots__/InputTime.spec.ts.snap
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -1,5 +1,18 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`InputTime > renders with ariaLabel correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
 exports[`InputTime > renders with as correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
@@ -191,6 +204,71 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 </div>"
 `;
 
+exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant none correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant outline correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant soft correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
@@ -204,6 +282,71 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 </div>"
 `;
 
+exports[`InputTime > renders with primary variant ghost correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant none correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant outline correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant soft correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
+exports[`InputTime > renders with primary variant subtle correctly 1`] = `
+"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
+`;
+
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>

From 6a79e775fe8878d3f81f6c52f4fb3809d890f3b9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 12:29:24 +0100
Subject: [PATCH 17/21] fix: clean forward omit

---
 src/runtime/components/InputTime.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index c4c1fe41b3..21466e9d3f 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -73,7 +73,7 @@ const slots = defineSlots<InputTimeSlots>()
 const { code: codeLocale, dir } = useLocale()
 const appConfig = useAppConfig() as InputTime['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'as', 'modelValue', 'defaultValue', 'color', 'variant', 'size', 'highlight', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'as', 'id', 'name', 'color', 'variant', 'size', 'name', 'highlight', 'disabled', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps>(props)
@@ -136,8 +136,6 @@ defineExpose({
     v-bind="{ ...rootProps, ...ariaAttrs }"
     :id="id"
     v-slot="{ segments }"
-    :model-value="modelValue"
-    :default-value="defaultValue"
     :name="name"
     :disabled="disabled"
     :locale="locale"

From d175ce3afde627aa752e909bf958a5d7645e0992 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 12:29:30 +0100
Subject: [PATCH 18/21] docs: clean

---
 docs/content/docs/2.components/input-time.md | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/docs/content/docs/2.components/input-time.md b/docs/content/docs/2.components/input-time.md
index bded65e863..0828d3c0e9 100644
--- a/docs/content/docs/2.components/input-time.md
+++ b/docs/content/docs/2.components/input-time.md
@@ -50,7 +50,7 @@ This component relies on the [`@internationalized/date`](https://react-spectrum.
 
 ### Hour Cycle
 
-Use the `hourCycle` prop to change the hour cycle of the InputTime.
+Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.
 
 ::component-code
 ---
@@ -89,13 +89,8 @@ Use the `variant` prop to change the variant of the InputTime.
 
 ::component-code
 ---
-cast:
-  defaultValue: TimeValue
-hide:
-  - defaultValue
 props:
   variant: subtle
-  defaultValue: [12, 30, 0]
 ---
 ::
 

From 6c9dd93d96e024b2970d90d708ce1b8aebdc9757 Mon Sep 17 00:00:00 2001
From: Alex <a.hywax@gmail.com>
Date: Wed, 5 Nov 2025 17:43:23 +0500
Subject: [PATCH 19/21] Update src/runtime/components/InputTime.vue

Co-authored-by: vercel[bot] <35613825+vercel[bot]@users.noreply.github.com>
---
 src/runtime/components/InputTime.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 21466e9d3f..4eae1a3b17 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -73,7 +73,7 @@ const slots = defineSlots<InputTimeSlots>()
 const { code: codeLocale, dir } = useLocale()
 const appConfig = useAppConfig() as InputTime['AppConfig']
 
-const rootProps = useForwardPropsEmits(reactiveOmit(props, 'as', 'id', 'name', 'color', 'variant', 'size', 'name', 'highlight', 'disabled', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
+const rootProps = useForwardPropsEmits(reactiveOmit(props, 'as', 'id', 'name', 'color', 'variant', 'size', 'highlight', 'disabled', 'autofocus', 'autofocusDelay', 'locale', 'icon', 'avatar', 'class', 'ui'), emits)
 
 const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
 const { orientation, size: fieldGroupSize } = useFieldGroup<InputTimeProps>(props)

From 4acf34a5d35bb04eb1bf10c14bcb1c7b7e1d8b74 Mon Sep 17 00:00:00 2001
From: hywax <a.hywax@gmail.com>
Date: Wed, 5 Nov 2025 17:45:54 +0500
Subject: [PATCH 20/21] feat(InputTime): add UIcon and UAvatar imports for
 enhanced functionality

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

diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index 4eae1a3b17..09bdc40060 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -63,6 +63,8 @@ import { useComponentIcons } from '../composables/useComponentIcons'
 import { useFormField } from '../composables/useFormField'
 import { useLocale } from '../composables/useLocale'
 import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
 
 const props = withDefaults(defineProps<InputTimeProps>(), {
   autofocusDelay: 0

From 1666d70051ad2b948f1d6ee2ca35e7fb003f04a9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 5 Nov 2025 14:40:54 +0100
Subject: [PATCH 21/21] fix: use `text-muted` on literal segment

---
 src/theme/input-time.ts                       |   2 +-
 .../__snapshots__/InputTime-vue.spec.ts.snap  | 494 ++++++++----------
 .../__snapshots__/InputTime.spec.ts.snap      | 494 ++++++++----------
 3 files changed, 417 insertions(+), 573 deletions(-)

diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
index 24991333cf..70974200ce 100644
--- a/src/theme/input-time.ts
+++ b/src/theme/input-time.ts
@@ -7,7 +7,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-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75', 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']
     },
     variants: {
       size: {
diff --git a/test/components/__snapshots__/InputTime-vue.spec.ts.snap b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
index aab70224e1..4a6818b6b4 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 class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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 class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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,25 +28,12 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with color neutral correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -54,12 +41,12 @@ exports[`InputTime > renders with color neutral correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -67,12 +54,12 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -80,12 +67,12 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -93,12 +80,12 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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 +93,12 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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,12 +106,12 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -132,10 +119,10 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -143,36 +130,36 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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" 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 leadingIcon correctly 1`] = `
 "<div leadingicon="i-lucide-arrow-left" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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" 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 class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -180,12 +167,12 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -193,12 +180,12 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -206,12 +193,12 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -219,12 +206,12 @@ exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant none correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -232,12 +219,12 @@ exports[`InputTime > renders with neutral variant none correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -245,12 +232,12 @@ exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -258,12 +245,12 @@ exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -271,12 +258,12 @@ exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -284,12 +271,12 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -297,12 +284,12 @@ exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with primary variant none correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -310,12 +297,12 @@ exports[`InputTime > renders with primary variant none correctly 1`] = `
 
 exports[`InputTime > renders with primary variant outline correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -323,12 +310,12 @@ exports[`InputTime > renders with primary variant outline correctly 1`] = `
 
 exports[`InputTime > renders with primary variant soft correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -336,12 +323,12 @@ exports[`InputTime > renders with primary variant soft correctly 1`] = `
 
 exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -349,12 +336,12 @@ exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -362,12 +349,12 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -375,12 +362,12 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -388,12 +375,12 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -401,12 +388,12 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
@@ -414,12 +401,12 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div 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 focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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>"
@@ -427,12 +414,12 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
@@ -440,90 +427,25 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div trailingicon="i-lucide-arrow-right" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if--><span 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" 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 class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
-
-exports[`InputTime > renders with variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
index 2b10d4a7bc..db7d505ee6 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 class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" aria-label="Aria label" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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 class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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,25 +28,12 @@ exports[`InputTime > renders with as correctly 1`] = `
 
 exports[`InputTime > renders with class correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with color neutral correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -54,12 +41,12 @@ exports[`InputTime > renders with color neutral correctly 1`] = `
 
 exports[`InputTime > renders with default slot correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -67,12 +54,12 @@ exports[`InputTime > renders with default slot correctly 1`] = `
 
 exports[`InputTime > renders with default value correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -80,12 +67,12 @@ exports[`InputTime > renders with default value correctly 1`] = `
 
 exports[`InputTime > renders with disabled correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -93,12 +80,12 @@ exports[`InputTime > renders with disabled correctly 1`] = `
 
 exports[`InputTime > renders with granularity correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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 +93,12 @@ exports[`InputTime > renders with granularity correctly 1`] = `
 
 exports[`InputTime > renders with hide time zone correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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,12 +106,12 @@ exports[`InputTime > renders with hide time zone correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="1" aria-valuemax="12" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -132,10 +119,10 @@ exports[`InputTime > renders with hour cycle 12 correctly 1`] = `
 
 exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -143,36 +130,36 @@ exports[`InputTime > renders with hour cycle 24 correctly 1`] = `
 
 exports[`InputTime > renders with icon correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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"></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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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"></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 leadingIcon correctly 1`] = `
 "<div leadingicon="i-lucide-arrow-left" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary ps-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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"></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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div><span 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"></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 class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -180,12 +167,12 @@ exports[`InputTime > renders with max value correctly 1`] = `
 
 exports[`InputTime > renders with min value correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -193,12 +180,12 @@ exports[`InputTime > renders with min value correctly 1`] = `
 
 exports[`InputTime > renders with modelValue correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -206,12 +193,12 @@ exports[`InputTime > renders with modelValue correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -219,12 +206,12 @@ exports[`InputTime > renders with neutral variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant none correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -232,12 +219,12 @@ exports[`InputTime > renders with neutral variant none correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -245,12 +232,12 @@ exports[`InputTime > renders with neutral variant outline correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -258,12 +245,12 @@ exports[`InputTime > renders with neutral variant soft correctly 1`] = `
 
 exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -271,12 +258,12 @@ exports[`InputTime > renders with neutral variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with placeholder correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -284,12 +271,12 @@ exports[`InputTime > renders with placeholder correctly 1`] = `
 
 exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -297,12 +284,12 @@ exports[`InputTime > renders with primary variant ghost correctly 1`] = `
 
 exports[`InputTime > renders with primary variant none correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -310,12 +297,12 @@ exports[`InputTime > renders with primary variant none correctly 1`] = `
 
 exports[`InputTime > renders with primary variant outline correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -323,12 +310,12 @@ exports[`InputTime > renders with primary variant outline correctly 1`] = `
 
 exports[`InputTime > renders with primary variant soft correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -336,12 +323,12 @@ exports[`InputTime > renders with primary variant soft correctly 1`] = `
 
 exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -349,12 +336,12 @@ exports[`InputTime > renders with primary variant subtle correctly 1`] = `
 
 exports[`InputTime > renders with readonly correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -362,12 +349,12 @@ exports[`InputTime > renders with readonly correctly 1`] = `
 
 exports[`InputTime > renders with required correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -375,12 +362,12 @@ exports[`InputTime > renders with required correctly 1`] = `
 
 exports[`InputTime > renders with size lg correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-3 py-2 text-sm gap-0.75 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -388,12 +375,12 @@ exports[`InputTime > renders with size lg correctly 1`] = `
 
 exports[`InputTime > renders with size md correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
@@ -401,12 +388,12 @@ exports[`InputTime > renders with size md correctly 1`] = `
 
 exports[`InputTime > renders with size sm correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-xs gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
@@ -414,12 +401,12 @@ exports[`InputTime > renders with size sm correctly 1`] = `
 
 exports[`InputTime > renders with size xl correctly 1`] = `
 "<div 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 focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-8 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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 aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[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>"
@@ -427,12 +414,12 @@ exports[`InputTime > renders with size xl correctly 1`] = `
 
 exports[`InputTime > renders with size xs correctly 1`] = `
 "<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2 py-1 text-xs gap-0.25 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-6 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>"
@@ -440,90 +427,25 @@ exports[`InputTime > renders with size xs correctly 1`] = `
 
 exports[`InputTime > renders with trailingIcon correctly 1`] = `
 "<div trailingicon="i-lucide-arrow-right" class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary pe-9" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated"></div>
   <!--v-if--><span 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"></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 class="group relative inline-flex items-center select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">––</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">AM</div>
+  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
 `;
-
-exports[`InputTime > renders with variant ghost correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant none correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-transparent" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant outline correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-default ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus: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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-elevated">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant soft correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50" 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented/50 group-hover:focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;
-
-exports[`InputTime > renders with variant subtle correctly 1`] = `
-"<div class="group relative inline-flex items-center rounded-md select-none transition-colors px-2.5 py-1.5 text-sm gap-0.5 text-highlighted bg-elevated ring ring-inset ring-accented focus-visible:ring-2 focus-visible:ring-inset 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="12" aria-valuetext="12 PM" data-reka-time-field-segment="hour" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">12</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">30</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 focus:bg-accented">PM</div>
-  <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-dimmed data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75 transition-colors not-data-[segment=literal]:w-7 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>"
-`;