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/input-time/InputTimeFormFieldExample.vue b/docs/app/components/content/examples/input-time/InputTimeFormFieldExample.vue
new file mode 100644
index 0000000000..d5a607e155
--- /dev/null
+++ b/docs/app/components/content/examples/input-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
new file mode 100644
index 0000000000..0828d3c0e9
--- /dev/null
+++ b/docs/content/docs/2.components/input-time.md
@@ -0,0 +1,181 @@
+---
+title: InputTime
+description: 'An input for selecting a time.'
+category: form
+links:
+  - label: TimeField
+    icon: i-custom-reka-ui
+    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
+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.
+::
+
+### Hour Cycle
+
+Use the `hour-cycle` prop to change the hour cycle of the InputTime. Defaults to `12`.
+
+::component-code
+---
+cast:
+  defaultValue: TimeValue
+ignore:
+  - hourCycle
+  - defaultValue
+external:
+  - defaultValue
+props:
+  hourCycle: 24
+  defaultValue: [16, 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
+---
+props:
+  variant: subtle
+---
+::
+
+### 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
+---
+::
+
+## 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
+
+:component-props
+
+### Slots
+
+:component-slots
+
+### Emits
+
+:component-emits
+
+## Theme
+
+:component-theme
+
+## Changelog
+
+:component-changelog
diff --git a/docs/public/components/dark/input-time.png b/docs/public/components/dark/input-time.png
new file mode 100644
index 0000000000..383e736afb
Binary files /dev/null and b/docs/public/components/dark/input-time.png differ
diff --git a/docs/public/components/light/input-time.png b/docs/public/components/light/input-time.png
new file mode 100644
index 0000000000..cb35f1f578
Binary files /dev/null and b/docs/public/components/light/input-time.png differ
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..dc97343457
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/input-time.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+import theme from '#build/ui/input-time'
+
+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.variant" :items="variants" multiple />
+    <USelect v-model="attrs.size" :items="sizes" multiple />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs">
+    <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
new file mode 100644
index 0000000000..09bdc40060
--- /dev/null
+++ b/src/runtime/components/InputTime.vue
@@ -0,0 +1,175 @@
+<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'
+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' | 'asChild' | 'locale' | 'dir'>, UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @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
+  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 { computed, onMounted, ref } from 'vue'
+import { TimeFieldRoot, TimeFieldInput, useForwardPropsEmits } from 'reka-ui'
+import { reactiveOmit } 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'
+import UIcon from './Icon.vue'
+import UAvatar from './Avatar.vue'
+
+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(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)
+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,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!props.avatar || !!slots.leading,
+  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>
+  <TimeFieldRoot
+    v-bind="{ ...rootProps, ...ariaAttrs }"
+    :id="id"
+    v-slot="{ segments }"
+    :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 })"
+    >
+      {{ 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/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..70974200ce
--- /dev/null
+++ b/src/theme/input-time.ts
@@ -0,0 +1,63 @@
+import { defuFn } from 'defu'
+import type { ModuleOptions } from '../module'
+import input from './input'
+
+export default (options: Required<ModuleOptions>) => {
+  return defuFn({
+    slots: {
+      root: () => undefined,
+      base: () => ['group relative inline-flex items-center rounded-md select-none', options.theme.transitions && 'transition-colors'],
+      segment: ['rounded text-center outline-hidden data-placeholder:text-dimmed data-[segment=literal]:text-muted data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75', options.theme.transitions && 'transition-colors']
+    },
+    variants: {
+      size: {
+        xs: {
+          base: (prev: string) => [prev, 'gap-0.25'],
+          segment: 'not-data-[segment=literal]:w-6'
+        },
+        sm: {
+          base: (prev: string) => [prev, 'gap-0.5'],
+          segment: 'not-data-[segment=literal]:w-6'
+        },
+        md: {
+          base: (prev: string) => [prev, 'gap-0.5'],
+          segment: 'not-data-[segment=literal]:w-7'
+        },
+        lg: {
+          base: (prev: string) => [prev, 'gap-0.75'],
+          segment: 'not-data-[segment=literal]:w-7'
+        },
+        xl: {
+          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/InputTime.spec.ts b/test/components/InputTime.spec.ts
new file mode 100644
index 0000000000..78ce1ae8fa
--- /dev/null
+++ b/test/components/InputTime.spec.ts
@@ -0,0 +1,71 @@
+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 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 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' } } }],
+    // Slots
+    ['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: {
+        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..4a6818b6b4
--- /dev/null
+++ b/test/components/__snapshots__/InputTime-vue.spec.ts.snap
@@ -0,0 +1,451 @@
+// 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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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>"
+`;
+
+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-muted data-invalid: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-muted data-invalid: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-muted data-invalid: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 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-muted data-invalid: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 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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-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>"
+`;
+
+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-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>"
+`;
+
+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-muted data-invalid: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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-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>"
+`;
+
+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-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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted data-invalid: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 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-muted data-invalid: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 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-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>"
+`;
+
+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-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>"
+`;
+
+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-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>"
+`;
+
+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-muted data-invalid: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-muted data-invalid: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>"
+`;
diff --git a/test/components/__snapshots__/InputTime.spec.ts.snap b/test/components/__snapshots__/InputTime.spec.ts.snap
new file mode 100644
index 0000000000..db7d505ee6
--- /dev/null
+++ b/test/components/__snapshots__/InputTime.spec.ts.snap
@@ -0,0 +1,451 @@
+// 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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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 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-muted data-invalid: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>"
+`;
+
+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-muted data-invalid: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-muted data-invalid: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-muted data-invalid: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 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-muted data-invalid: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 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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-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>"
+`;
+
+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-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>"
+`;
+
+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-muted data-invalid: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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-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>"
+`;
+
+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-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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted 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>"
+`;
+
+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-muted data-invalid: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 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-muted data-invalid: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 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-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>"
+`;
+
+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-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>"
+`;
+
+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-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>"
+`;
+
+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-muted data-invalid: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-muted data-invalid: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>"
+`;