From 1bfe244c27feef0208a1ae0b917acbc6c69b75b4 Mon Sep 17 00:00:00 2001
From: Mees <mees@sevenlab.nl>
Date: Thu, 24 Apr 2025 13:49:59 +0200
Subject: [PATCH 1/9] feat: time-field

---
 playground-vue/src/app.vue                    |   1 +
 playground/app/app.vue                        |   1 +
 .../app/pages/components/time-field.vue       | 135 ++++++++++++
 src/runtime/components/TimeField.vue          | 201 ++++++++++++++++++
 src/runtime/types/index.ts                    |   1 +
 src/theme/index.ts                            |   1 +
 src/theme/time-field.ts                       | 164 ++++++++++++++
 7 files changed, 504 insertions(+)
 create mode 100644 playground/app/pages/components/time-field.vue
 create mode 100644 src/runtime/components/TimeField.vue
 create mode 100644 src/theme/time-field.ts

diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index caaf932a0c..169d3517b7 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -63,6 +63,7 @@ const components = [
   'textarea',
   'toast',
   'tooltip',
+  'time-field',
   'tree'
 ]
 
diff --git a/playground/app/app.vue b/playground/app/app.vue
index 5bfd85766e..a6c522458d 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -61,6 +61,7 @@ const components = [
   'tabs',
   'table',
   'textarea',
+  'time-field',
   'toast',
   'tooltip',
   'tree'
diff --git a/playground/app/pages/components/time-field.vue b/playground/app/pages/components/time-field.vue
new file mode 100644
index 0000000000..b7cb1d1282
--- /dev/null
+++ b/playground/app/pages/components/time-field.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import { upperFirst } from 'scule'
+import { Time } from '@internationalized/date'
+import { computed } from 'vue'
+import { useAppConfig } from '#imports'
+
+const appConfig = useAppConfig()
+const timeFieldTheme = computed(() => appConfig.ui.timeField)
+
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
+const variants = ['outline', 'soft', 'subtle', 'ghost', 'none']
+
+// Default time values
+const defaultTime = ref(new Time(10, 30))
+const hourOnlyTime = ref(new Time(14, 0))
+const secondsTime = ref(new Time(9, 45, 30))
+const cycle24Time = ref(new Time(16, 30))
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-8">
+    <div class="flex flex-col gap-4 w-48">
+      <h3 class="text-lg font-medium">Default TimeField</h3>
+      <UTimeField v-model="defaultTime" />
+    </div>
+
+    <div class="flex items-center gap-2 flex-wrap justify-center">
+      <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
+        <p class="text-sm mb-2">{{ upperFirst(variant) }}</p>
+        <UTimeField
+          v-model="defaultTime"
+          :variant="variant"
+          class="w-48"
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 flex-wrap justify-center">
+      <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
+        <p class="text-sm mb-2">{{ upperFirst(variant) }} (Neutral)</p>
+        <UTimeField
+          v-model="defaultTime"
+          :variant="variant"
+          color="neutral"
+          class="w-48"
+        />
+      </div>
+    </div>
+
+    <div class="flex items-center gap-2 flex-wrap justify-center">
+      <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
+        <p class="text-sm mb-2">{{ upperFirst(variant) }} (Error)</p>
+        <UTimeField
+          v-model="defaultTime"
+          :variant="variant"
+          color="error"
+          highlight
+          class="w-48"
+        />
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-medium">TimeField Variants</h3>
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">Disabled</p>
+          <UTimeField v-model="defaultTime" disabled />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">Required</p>
+          <UTimeField v-model="defaultTime" required />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">Readonly</p>
+          <UTimeField v-model="defaultTime" readonly />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">Hour only</p>
+          <UTimeField v-model="hourOnlyTime" granularity="hour" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">With seconds</p>
+          <UTimeField v-model="secondsTime" granularity="second" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">24 hour cycle</p>
+          <UTimeField v-model="cycle24Time" :hour-cycle="24" />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">Loading</p>
+          <UTimeField v-model="defaultTime" loading />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">Loading (trailing)</p>
+          <UTimeField v-model="defaultTime" loading trailing />
+        </div>
+        <div class="flex flex-col gap-2">
+          <p class="text-sm">With icons</p>
+          <UTimeField v-model="defaultTime" icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-medium">TimeField Sizes</h3>
+      <div class="flex flex-wrap gap-4 justify-center">
+        <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
+          <p class="text-sm mb-2">{{ upperFirst(size) }}</p>
+          <UTimeField v-model="defaultTime" :size="size" />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-medium">TimeField with Leading Icon</h3>
+      <div class="flex flex-wrap gap-4 justify-center">
+        <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
+          <p class="text-sm mb-2">{{ upperFirst(size) }}</p>
+          <UTimeField v-model="defaultTime" icon="i-lucide-clock" :size="size" />
+        </div>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-4">
+      <h3 class="text-lg font-medium">TimeField with Trailing Icon</h3>
+      <div class="flex flex-wrap gap-4 justify-center">
+        <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
+          <p class="text-sm mb-2">{{ upperFirst(size) }}</p>
+          <UTimeField v-model="defaultTime" icon="i-lucide-clock" trailing :size="size" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/runtime/components/TimeField.vue b/src/runtime/components/TimeField.vue
new file mode 100644
index 0000000000..32ca4862d4
--- /dev/null
+++ b/src/runtime/components/TimeField.vue
@@ -0,0 +1,201 @@
+<script lang="ts">
+import type { AppConfig } from '@nuxt/schema'
+import theme from '#build/ui/time-field'
+import type { UseComponentIconsProps } from '../composables/useComponentIcons'
+import type { ComponentConfig } from '../types/utils'
+
+type TimeField = ComponentConfig<typeof theme, AppConfig, 'timeField'>
+
+export interface TimeFieldProps extends UseComponentIconsProps {
+  /**
+   * The element or component this component should render as.
+   * @defaultValue 'div'
+   */
+  as?: any
+  id?: string
+  name?: string
+  /** The placeholder text when the input is empty. */
+  placeholder?: string
+  /**
+   * @defaultValue 'primary'
+   */
+  color?: TimeField['variants']['color']
+  /**
+   * @defaultValue 'outline'
+   */
+  variant?: TimeField['variants']['variant']
+  /**
+   * @defaultValue 'md'
+   */
+  size?: TimeField['variants']['size']
+  required?: boolean
+  disabled?: boolean
+  readonly?: boolean
+  /** Highlight the ring color like a focus state. */
+  highlight?: boolean
+  /**
+   * The granularity to use for formatting times.
+   * @defaultValue 'minute'
+   */
+  granularity?: 'hour' | 'minute' | 'second'
+  /**
+   * The hour cycle used for formatting times.
+   */
+  hourCycle?: 12 | 24
+  /**
+   * Whether to hide the time zone segment of the field
+   */
+  hideTimeZone?: boolean
+  /**
+   * The locale to use for formatting dates
+   */
+  locale?: string
+  /**
+   * The minimum time that can be selected
+   */
+  minValue?: any
+  /**
+   * The maximum time that can be selected
+   */
+  maxValue?: any
+  class?: any
+  ui?: TimeField['slots']
+}
+
+export interface TimeFieldEmits {
+  (e: 'update:modelValue' | 'update:placeholder', payload: any): void
+  (e: 'blur', event: FocusEvent): void
+  (e: 'change', event: Event): void
+}
+
+export interface TimeFieldSlots {
+  leading(props?: {}): any
+  default(props?: {}): any
+  trailing(props?: {}): any
+}
+</script>
+
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { Primitive, TimeFieldRoot, TimeFieldInput } from 'reka-ui'
+import { Time } from '@internationalized/date'
+import { useAppConfig } from '#imports'
+import { useButtonGroup } from '../composables/useButtonGroup'
+import { useComponentIcons } from '../composables/useComponentIcons'
+import { useFormField } from '../composables/useFormField'
+import { tv } from '../utils/tv'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<TimeFieldProps>(), {
+  granularity: 'minute',
+  hideTimeZone: false
+})
+const emits = defineEmits<TimeFieldEmits>()
+const slots = defineSlots<TimeFieldSlots>()
+
+const [modelValue] = defineModel<any>()
+
+// Default placeholder - when needed, use a Time object of 12:00
+const defaultPlaceholder = new Time(12, 0, 0)
+
+const appConfig = useAppConfig() as TimeField['AppConfig']
+const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<TimeFieldProps>(props, { deferInputValidation: true })
+const { orientation, size: buttonGroupSize } = useButtonGroup<TimeFieldProps>(props)
+const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
+
+const fieldSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeField || {}) })({
+  color: color.value,
+  variant: props.variant,
+  size: fieldSize?.value,
+  loading: props.loading,
+  highlight: highlight.value,
+  leading: isLeading.value || !!slots.leading,
+  trailing: isTrailing.value || !!slots.trailing,
+  buttonGroup: orientation.value
+}))
+
+const fieldRef = ref<HTMLElement | null>(null)
+
+function updateValue(value: any) {
+  modelValue.value = value
+  emitFormInput()
+  emitFormChange()
+}
+
+function onBlur(event: FocusEvent) {
+  emitFormBlur()
+  emits('blur', event)
+}
+
+defineExpose({
+  fieldRef
+})
+</script>
+
+<template>
+  <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
+    <TimeFieldRoot
+      ref="fieldRef"
+      :id="id"
+      :name="name"
+      :model-value="modelValue"
+      :default-placeholder="defaultPlaceholder"
+      :granularity="granularity"
+      :hour-cycle="hourCycle"
+      :hide-time-zone="hideTimeZone"
+      :locale="locale"
+      :min-value="minValue"
+      :max-value="maxValue"
+      :disabled="disabled"
+      :readonly="readonly"
+      :required="required"
+      v-slot="{ segments }"
+      v-bind="{ ...ariaAttrs }"
+      class="flex h-full w-full items-center"
+      @update:model-value="updateValue"
+      @update:placeholder="$emit('update:placeholder', $event)"
+      @blur="onBlur"
+      @focus="emitFormFocus"
+    >
+      <!-- Leading Icon/Slot -->
+      <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
+        <slot name="leading">
+          <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
+        </slot>
+      </span>
+
+      <!-- Time Field Segments -->
+      <div class="flex flex-1 items-center justify-center">
+        <template v-for="segment in segments" :key="segment.part">
+          <TimeFieldInput
+            v-if="segment.part === 'literal'"
+            :part="segment.part"
+            :class="ui.base({ class: props.ui?.base })"
+          >
+            {{ segment.value }}
+          </TimeFieldInput>
+          <TimeFieldInput
+            v-else
+            :part="segment.part"
+            :class="ui.base({ class: props.ui?.base })"
+          >
+            {{ segment.value }}
+          </TimeFieldInput>
+        </template>
+      </div>
+
+      <slot />
+
+      <!-- Trailing Icon/Slot -->
+      <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
+        <slot name="trailing">
+          <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
+        </slot>
+      </span>
+    </TimeFieldRoot>
+  </Primitive>
+</template>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index c5e73f665b..40053098ef 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -46,6 +46,7 @@ export * from '../components/Switch.vue'
 export * from '../components/Table.vue'
 export * from '../components/Tabs.vue'
 export * from '../components/Textarea.vue'
+export * from '../components/TimeField.vue'
 export * from '../components/Toast.vue'
 export * from '../components/Toaster.vue'
 export * from '../components/Tooltip.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 752065ec45..a7acc948c5 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -44,6 +44,7 @@ export { default as switch } from './switch'
 export { default as table } from './table'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
+export { default as timeField } from './time-field'
 export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
diff --git a/src/theme/time-field.ts b/src/theme/time-field.ts
new file mode 100644
index 0000000000..6841ce5950
--- /dev/null
+++ b/src/theme/time-field.ts
@@ -0,0 +1,164 @@
+import type { ModuleOptions } from '../module'
+import { buttonGroupVariantWithRoot } from './button-group'
+
+export default (options: Required<ModuleOptions>) => ({
+  slots: {
+    root: 'relative inline-flex items-center border rounded-md',
+    base: ['mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed', options.theme.transitions && 'transition-colors'],
+    leading: 'flex items-center h-full px-2',
+    leadingIcon: 'shrink-0 text-dimmed',
+    trailing: 'flex items-center h-full px-2',
+    trailingIcon: 'shrink-0 text-dimmed'
+  },
+  variants: {
+    ...buttonGroupVariantWithRoot,
+    size: {
+      xs: {
+        root: 'text-xs',
+        base: 'py-1 text-xs',
+        leadingIcon: 'size-4',
+        trailingIcon: 'size-4'
+      },
+      sm: {
+        root: 'text-xs',
+        base: 'py-1.5 text-xs',
+        leadingIcon: 'size-4',
+        trailingIcon: 'size-4'
+      },
+      md: {
+        root: 'text-sm',
+        base: 'py-1.5 text-sm',
+        leadingIcon: 'size-5',
+        trailingIcon: 'size-5'
+      },
+      lg: {
+        root: 'text-sm',
+        base: 'py-2 text-sm',
+        leadingIcon: 'size-5',
+        trailingIcon: 'size-5'
+      },
+      xl: {
+        root: 'text-base',
+        base: 'py-2 text-base',
+        leadingIcon: 'size-6',
+        trailingIcon: 'size-6'
+      }
+    },
+    variant: {
+      outline: {
+        root: 'border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500'
+      },
+      soft: {
+        root: 'border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50'
+      },
+      subtle: {
+        root: 'border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500'
+      },
+      ghost: {
+        root: 'border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent'
+      },
+      none: {
+        root: 'border-transparent text-highlighted bg-transparent'
+      }
+    },
+    color: {
+      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
+      neutral: ''
+    },
+    leading: {
+      true: ''
+    },
+    trailing: {
+      true: ''
+    },
+    loading: {
+      true: ''
+    },
+    highlight: {
+      true: ''
+    }
+  },
+  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+    color,
+    variant: ['outline', 'subtle'],
+    class: {
+      root: `data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-${color}`
+    }
+  })), ...(options.theme.colors || []).map((color: string) => ({
+    color,
+    highlight: true,
+    class: {
+      root: `ring ring-inset ring-${color}`
+    }
+  })), {
+    color: 'neutral',
+    variant: ['outline', 'subtle'],
+    class: {
+      root: 'data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted'
+    }
+  }, {
+    color: 'neutral',
+    highlight: true,
+    class: {
+      root: 'ring ring-inset ring-inverted'
+    }
+  }, {
+    leading: true,
+    size: 'xs',
+    class: {}
+  }, {
+    leading: true,
+    size: 'sm',
+    class: {}
+  }, {
+    leading: true,
+    size: 'md',
+    class: {}
+  }, {
+    leading: true,
+    size: 'lg',
+    class: {}
+  }, {
+    leading: true,
+    size: 'xl',
+    class: {}
+  }, {
+    trailing: true,
+    size: 'xs',
+    class: {}
+  }, {
+    trailing: true,
+    size: 'sm',
+    class: {}
+  }, {
+    trailing: true,
+    size: 'md',
+    class: {}
+  }, {
+    trailing: true,
+    size: 'lg',
+    class: {}
+  }, {
+    trailing: true,
+    size: 'xl',
+    class: {}
+  }, {
+    loading: true,
+    leading: true,
+    class: {
+      leadingIcon: 'animate-spin'
+    }
+  }, {
+    loading: true,
+    leading: false,
+    trailing: true,
+    class: {
+      trailingIcon: 'animate-spin'
+    }
+  }],
+  defaultVariants: {
+    size: 'md',
+    color: 'primary',
+    variant: 'outline'
+  }
+})

From c7974fe261167566b9461be9aa2356263659d45e Mon Sep 17 00:00:00 2001
From: Mees <mees@sevenlab.nl>
Date: Thu, 24 Apr 2025 14:01:47 +0200
Subject: [PATCH 2/9] chore: eslint fixes

---
 .../app/pages/components/time-field.vue       | 85 +++++++++++++------
 src/runtime/components/TimeField.vue          |  4 +-
 2 files changed, 62 insertions(+), 27 deletions(-)

diff --git a/playground/app/pages/components/time-field.vue b/playground/app/pages/components/time-field.vue
index b7cb1d1282..6bc64a3ece 100644
--- a/playground/app/pages/components/time-field.vue
+++ b/playground/app/pages/components/time-field.vue
@@ -1,11 +1,6 @@
 <script setup lang="ts">
 import { upperFirst } from 'scule'
 import { Time } from '@internationalized/date'
-import { computed } from 'vue'
-import { useAppConfig } from '#imports'
-
-const appConfig = useAppConfig()
-const timeFieldTheme = computed(() => appConfig.ui.timeField)
 
 const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
 const variants = ['outline', 'soft', 'subtle', 'ghost', 'none']
@@ -20,13 +15,17 @@ const cycle24Time = ref(new Time(16, 30))
 <template>
   <div class="flex flex-col items-center gap-8">
     <div class="flex flex-col gap-4 w-48">
-      <h3 class="text-lg font-medium">Default TimeField</h3>
+      <h3 class="text-lg font-medium">
+        Default TimeField
+      </h3>
       <UTimeField v-model="defaultTime" />
     </div>
 
     <div class="flex items-center gap-2 flex-wrap justify-center">
       <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
-        <p class="text-sm mb-2">{{ upperFirst(variant) }}</p>
+        <p class="text-sm mb-2">
+          {{ upperFirst(variant) }}
+        </p>
         <UTimeField
           v-model="defaultTime"
           :variant="variant"
@@ -37,7 +36,9 @@ const cycle24Time = ref(new Time(16, 30))
 
     <div class="flex items-center gap-2 flex-wrap justify-center">
       <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
-        <p class="text-sm mb-2">{{ upperFirst(variant) }} (Neutral)</p>
+        <p class="text-sm mb-2">
+          {{ upperFirst(variant) }} (Neutral)
+        </p>
         <UTimeField
           v-model="defaultTime"
           :variant="variant"
@@ -49,7 +50,9 @@ const cycle24Time = ref(new Time(16, 30))
 
     <div class="flex items-center gap-2 flex-wrap justify-center">
       <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
-        <p class="text-sm mb-2">{{ upperFirst(variant) }} (Error)</p>
+        <p class="text-sm mb-2">
+          {{ upperFirst(variant) }} (Error)
+        </p>
         <UTimeField
           v-model="defaultTime"
           :variant="variant"
@@ -61,72 +64,104 @@ const cycle24Time = ref(new Time(16, 30))
     </div>
 
     <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">TimeField Variants</h3>
+      <h3 class="text-lg font-medium">
+        TimeField Variants
+      </h3>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
         <div class="flex flex-col gap-2">
-          <p class="text-sm">Disabled</p>
+          <p class="text-sm">
+            Disabled
+          </p>
           <UTimeField v-model="defaultTime" disabled />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">Required</p>
+          <p class="text-sm">
+            Required
+          </p>
           <UTimeField v-model="defaultTime" required />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">Readonly</p>
+          <p class="text-sm">
+            Readonly
+          </p>
           <UTimeField v-model="defaultTime" readonly />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">Hour only</p>
+          <p class="text-sm">
+            Hour only
+          </p>
           <UTimeField v-model="hourOnlyTime" granularity="hour" />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">With seconds</p>
+          <p class="text-sm">
+            With seconds
+          </p>
           <UTimeField v-model="secondsTime" granularity="second" />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">24 hour cycle</p>
+          <p class="text-sm">
+            24 hour cycle
+          </p>
           <UTimeField v-model="cycle24Time" :hour-cycle="24" />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">Loading</p>
+          <p class="text-sm">
+            Loading
+          </p>
           <UTimeField v-model="defaultTime" loading />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">Loading (trailing)</p>
+          <p class="text-sm">
+            Loading (trailing)
+          </p>
           <UTimeField v-model="defaultTime" loading trailing />
         </div>
         <div class="flex flex-col gap-2">
-          <p class="text-sm">With icons</p>
+          <p class="text-sm">
+            With icons
+          </p>
           <UTimeField v-model="defaultTime" icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" />
         </div>
       </div>
     </div>
 
     <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">TimeField Sizes</h3>
+      <h3 class="text-lg font-medium">
+        TimeField Sizes
+      </h3>
       <div class="flex flex-wrap gap-4 justify-center">
         <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
-          <p class="text-sm mb-2">{{ upperFirst(size) }}</p>
+          <p class="text-sm mb-2">
+            {{ upperFirst(size) }}
+          </p>
           <UTimeField v-model="defaultTime" :size="size" />
         </div>
       </div>
     </div>
 
     <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">TimeField with Leading Icon</h3>
+      <h3 class="text-lg font-medium">
+        TimeField with Leading Icon
+      </h3>
       <div class="flex flex-wrap gap-4 justify-center">
         <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
-          <p class="text-sm mb-2">{{ upperFirst(size) }}</p>
+          <p class="text-sm mb-2">
+            {{ upperFirst(size) }}
+          </p>
           <UTimeField v-model="defaultTime" icon="i-lucide-clock" :size="size" />
         </div>
       </div>
     </div>
 
     <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">TimeField with Trailing Icon</h3>
+      <h3 class="text-lg font-medium">
+        TimeField with Trailing Icon
+      </h3>
       <div class="flex flex-wrap gap-4 justify-center">
         <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
-          <p class="text-sm mb-2">{{ upperFirst(size) }}</p>
+          <p class="text-sm mb-2">
+            {{ upperFirst(size) }}
+          </p>
           <UTimeField v-model="defaultTime" icon="i-lucide-clock" trailing :size="size" />
         </div>
       </div>
diff --git a/src/runtime/components/TimeField.vue b/src/runtime/components/TimeField.vue
index 32ca4862d4..aebb1c9ed1 100644
--- a/src/runtime/components/TimeField.vue
+++ b/src/runtime/components/TimeField.vue
@@ -139,10 +139,11 @@ defineExpose({
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <TimeFieldRoot
-      ref="fieldRef"
       :id="id"
+      ref="fieldRef"
       :name="name"
       :model-value="modelValue"
+      v-slot="{ segments }"
       :default-placeholder="defaultPlaceholder"
       :granularity="granularity"
       :hour-cycle="hourCycle"
@@ -153,7 +154,6 @@ defineExpose({
       :disabled="disabled"
       :readonly="readonly"
       :required="required"
-      v-slot="{ segments }"
       v-bind="{ ...ariaAttrs }"
       class="flex h-full w-full items-center"
       @update:model-value="updateValue"

From 4fffae6e7ed4dc39833dc93cac97586c5f5816ac Mon Sep 17 00:00:00 2001
From: Mees <mees@sevenlab.nl>
Date: Thu, 24 Apr 2025 14:08:09 +0200
Subject: [PATCH 3/9] chore: fix typecheck

---
 playground/app/pages/components/time-field.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/playground/app/pages/components/time-field.vue b/playground/app/pages/components/time-field.vue
index 6bc64a3ece..422e315ff1 100644
--- a/playground/app/pages/components/time-field.vue
+++ b/playground/app/pages/components/time-field.vue
@@ -2,8 +2,9 @@
 import { upperFirst } from 'scule'
 import { Time } from '@internationalized/date'
 
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl']
-const variants = ['outline', 'soft', 'subtle', 'ghost', 'none']
+// Define proper types for variants and sizes
+const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
+const variants = ['outline', 'soft', 'subtle', 'ghost', 'none'] as const
 
 // Default time values
 const defaultTime = ref(new Time(10, 30))

From 01faa68f0c3c1794a4d09f762556e33a14aef458 Mon Sep 17 00:00:00 2001
From: Mees <mees@sevenlab.nl>
Date: Thu, 24 Apr 2025 14:20:43 +0200
Subject: [PATCH 4/9] chore: initial tests

---
 test/components/TimeField.spec.ts             |  96 ++
 .../__snapshots__/TimeField.spec.ts.snap      | 837 ++++++++++++++++++
 2 files changed, 933 insertions(+)
 create mode 100644 test/components/TimeField.spec.ts
 create mode 100644 test/components/__snapshots__/TimeField.spec.ts.snap

diff --git a/test/components/TimeField.spec.ts b/test/components/TimeField.spec.ts
new file mode 100644
index 0000000000..7bc28cb21b
--- /dev/null
+++ b/test/components/TimeField.spec.ts
@@ -0,0 +1,96 @@
+import { describe, it, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { Time } from '@internationalized/date'
+import TimeField, { type TimeFieldProps, type TimeFieldSlots } from '../../src/runtime/components/TimeField.vue'
+import ComponentRender from '../component-render'
+import theme from '#build/ui/time-field'
+
+import { renderForm } from '../utils/form'
+import type { FormInputEvents } from '~/src/module'
+
+describe('TimeField', () => {
+  const sizes = Object.keys(theme.variants.size) as any
+  const variants = Object.keys(theme.variants.variant) as any
+  const defaultTime = new Time(10, 30)
+
+  it.each([
+    // Props
+    ['with id', { props: { id: 'id' } }],
+    ['with name', { props: { name: 'name' } }],
+    ['with placeholder', { props: { placeholder: 'Select time...' } }],
+    ['with disabled', { props: { disabled: true } }],
+    ['with required', { props: { required: true } }],
+    ['with readonly', { props: { readonly: true } }],
+    ['with icon', { props: { icon: 'i-lucide-clock' } }],
+    ['with leading and icon', { props: { leading: true, icon: 'i-lucide-clock' } }],
+    ['with leadingIcon', { props: { leadingIcon: 'i-lucide-clock' } }],
+    ['with trailing and icon', { props: { trailing: true, icon: 'i-lucide-chevron-down' } }],
+    ['with trailingIcon', { props: { trailingIcon: 'i-lucide-chevron-down' } }],
+    ['with loading', { props: { loading: true } }],
+    ['with loading trailing', { props: { loading: true, trailing: true } }],
+    ['with loadingIcon', { props: { loading: true, loadingIcon: 'i-lucide-loader' } }],
+    ['with granularity hour', { props: { granularity: 'hour' } }],
+    ['with granularity minute', { props: { granularity: 'minute' } }],
+    ['with granularity second', { props: { granularity: 'second' } }],
+    ['with 12 hour cycle', { props: { hourCycle: 12 } }],
+    ['with 24 hour cycle', { props: { hourCycle: 24 } }],
+    ['with hideTimeZone', { props: { hideTimeZone: true } }],
+    ['with locale', { props: { locale: 'fr-FR' } }],
+    ['with minValue', { props: { minValue: new Time(8, 0) } }],
+    ['with maxValue', { props: { maxValue: new Time(17, 0) } }],
+    ...sizes.map((size: string) => [`with size ${size}`, { props: { size } }]),
+    ...variants.map((variant: string) => [`with primary variant ${variant}`, { props: { variant } }]),
+    ...variants.map((variant: string) => [`with neutral variant ${variant}`, { props: { variant, color: 'neutral' } }]),
+    ['with ariaLabel', { attrs: { 'aria-label': 'Time selector' } }],
+    ['with as', { props: { as: 'section' } }],
+    ['with class', { props: { class: 'absolute' } }],
+    ['with ui', { props: { ui: { base: 'rounded-full' } } }],
+    // Slots
+    ['with default slot', { slots: { default: () => 'Default slot' } }],
+    ['with leading slot', { slots: { leading: () => 'Leading slot' } }],
+    ['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }]
+  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TimeFieldProps, slots?: Partial<TimeFieldSlots> }) => {
+    const html = await ComponentRender(nameOrHtml, options, TimeField)
+    expect(html).toMatchSnapshot()
+  })
+
+  describe('emits', () => {
+    test('update:modelValue event', async () => {
+      const wrapper = mount(TimeField, {
+        props: {
+          modelValue: defaultTime
+        }
+      })
+
+      // Find the TimeFieldRoot component and trigger update:model-value event
+      const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' })
+      const newTime = new Time(14, 45)
+
+      await timeFieldRoot.vm.$emit('update:model-value', newTime)
+
+      expect(wrapper.emitted()).toHaveProperty('update:modelValue')
+      expect(wrapper.emitted()['update:modelValue'][0]).toEqual([newTime])
+    })
+
+    test('blur event', async () => {
+      const wrapper = mount(TimeField)
+      const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' })
+
+      await timeFieldRoot.vm.$emit('blur', { type: 'blur' })
+
+      expect(wrapper.emitted()).toHaveProperty('blur')
+      expect(wrapper.emitted().blur[0]).toEqual([{ type: 'blur' }])
+    })
+
+    test('update:placeholder event', async () => {
+      const wrapper = mount(TimeField)
+      const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' })
+      const placeholder = new Time(12, 0)
+
+      await timeFieldRoot.vm.$emit('update:placeholder', placeholder)
+
+      expect(wrapper.emitted()).toHaveProperty('update:placeholder')
+      expect(wrapper.emitted()['update:placeholder'][0]).toEqual([placeholder])
+    })
+  })
+})
diff --git a/test/components/__snapshots__/TimeField.spec.ts.snap b/test/components/__snapshots__/TimeField.spec.ts.snap
new file mode 100644
index 0000000000..3ba8422e20
--- /dev/null
+++ b/test/components/__snapshots__/TimeField.spec.ts.snap
@@ -0,0 +1,837 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TimeField > renders with 12 hour cycle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with 24 hour cycle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with ariaLabel correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with as correctly 1`] = `
+"<section class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</section>"
+`;
+
+exports[`TimeField > renders with class correctly 1`] = `
+"<div class="inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary absolute">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with default slot correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div>Default slot
+    <!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with disabled correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" disabled="" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with granularity hour correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with granularity minute correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with granularity second correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="second, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="second" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with hideTimeZone correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with icon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with id correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="id" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with leading and icon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with leading slot correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2">Leading slot</span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with leadingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with loading correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:refresh-cw shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with loading trailing correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:refresh-cw shrink-0 text-dimmed size-5 animate-spin" 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;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with loadingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with locale correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with maxValue correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with minValue correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with name correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="name" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant ghost correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant none correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant outline correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant soft correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant subtle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with placeholder correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant ghost correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant none correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant outline correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant soft correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant subtle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with readonly correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" data-readonly="" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with required correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" required="" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size lg correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size md correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size sm correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size xl correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-base border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size xs correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with trailing and icon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:chevron-down 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;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with trailing slot correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with trailingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:chevron-down 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;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with ui correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;

From aaf41e00136e963d6c5194e38e41d84178c39452 Mon Sep 17 00:00:00 2001
From: Mees <mees@sevenlab.nl>
Date: Thu, 24 Apr 2025 14:23:30 +0200
Subject: [PATCH 5/9] chore: fix unused imports -.-'

---
 test/components/TimeField.spec.ts | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/test/components/TimeField.spec.ts b/test/components/TimeField.spec.ts
index 7bc28cb21b..309f70f73e 100644
--- a/test/components/TimeField.spec.ts
+++ b/test/components/TimeField.spec.ts
@@ -5,9 +5,6 @@ import TimeField, { type TimeFieldProps, type TimeFieldSlots } from '../../src/r
 import ComponentRender from '../component-render'
 import theme from '#build/ui/time-field'
 
-import { renderForm } from '../utils/form'
-import type { FormInputEvents } from '~/src/module'
-
 describe('TimeField', () => {
   const sizes = Object.keys(theme.variants.size) as any
   const variants = Object.keys(theme.variants.variant) as any

From 59777af53bc5c65562692893a3996bca0517ff4e Mon Sep 17 00:00:00 2001
From: Mees <mees@sevenlab.nl>
Date: Thu, 24 Apr 2025 14:32:12 +0200
Subject: [PATCH 6/9] chore: added snap to fix test?

---
 .../__snapshots__/TimeField-vue.spec.ts.snap  | 837 ++++++++++++++++++
 1 file changed, 837 insertions(+)
 create mode 100644 test/components/__snapshots__/TimeField-vue.spec.ts.snap

diff --git a/test/components/__snapshots__/TimeField-vue.spec.ts.snap b/test/components/__snapshots__/TimeField-vue.spec.ts.snap
new file mode 100644
index 0000000000..f0a2eabc17
--- /dev/null
+++ b/test/components/__snapshots__/TimeField-vue.spec.ts.snap
@@ -0,0 +1,837 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`TimeField > renders with 12 hour cycle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with 24 hour cycle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with ariaLabel correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with as correctly 1`] = `
+"<section class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</section>"
+`;
+
+exports[`TimeField > renders with class correctly 1`] = `
+"<div class="inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary absolute">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with default slot correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div>Default slot
+    <!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with disabled correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" aria-disabled="true" data-disabled="" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" disabled="" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with granularity hour correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with granularity minute correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with granularity second correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="second, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="second" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with hideTimeZone correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with icon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with id correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="id" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with leading and icon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with leading slot correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2">Leading slot</span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with leadingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with loading correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with loading trailing correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></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;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with loadingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with locale correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with maxValue correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with minValue correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with name correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="name" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant ghost correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant none correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant outline correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant soft correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with neutral variant subtle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with placeholder correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant ghost correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant none correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant outline correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant soft correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with primary variant subtle correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with readonly correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" data-readonly="" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with required correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" required="" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size lg correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size md correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size sm correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size xl correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-base border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with size xs correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with trailing and icon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></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;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with trailing slot correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with trailingIcon correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
+    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></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;" value="">
+  </div>
+</div>"
+`;
+
+exports[`TimeField > renders with ui correctly 1`] = `
+"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
+  <div class="flex h-full w-full items-center" role="group" dir="ltr">
+    <!-- Leading Icon/Slot -->
+    <!--v-if-->
+    <!-- Time Field Segments -->
+    <div class="flex flex-1 items-center justify-center">
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">:</div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
+      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">AM</div>
+      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
+    </div><!-- Trailing Icon/Slot -->
+    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
+  </div>
+</div>"
+`;

From d0770a9488fff0b93d810b28d4da54bba3387af9 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 28 May 2025 16:29:48 +0200
Subject: [PATCH 7/9] up

---
 playground-vue/src/app.vue                    |   2 +-
 playground/app/app.vue                        |   2 +-
 .../app/pages/components/input-time.vue       |  80 ++
 .../app/pages/components/time-field.vue       | 171 ----
 src/runtime/components/InputNumber.vue        |   9 +-
 .../{TimeField.vue => InputTime.vue}          | 140 ++-
 src/runtime/types/index.ts                    |   2 +-
 src/theme/index.ts                            |   2 +-
 src/theme/input-time.ts                       |  11 +
 src/theme/time-field.ts                       | 164 ----
 .../{TimeField.spec.ts => InputTime.spec.ts}  |  30 +-
 .../__snapshots__/TimeField-vue.spec.ts.snap  | 837 ------------------
 .../__snapshots__/TimeField.spec.ts.snap      | 837 ------------------
 13 files changed, 178 insertions(+), 2109 deletions(-)
 create mode 100644 playground/app/pages/components/input-time.vue
 delete mode 100644 playground/app/pages/components/time-field.vue
 rename src/runtime/components/{TimeField.vue => InputTime.vue} (53%)
 create mode 100644 src/theme/input-time.ts
 delete mode 100644 src/theme/time-field.ts
 rename test/components/{TimeField.spec.ts => InputTime.spec.ts} (79%)
 delete mode 100644 test/components/__snapshots__/TimeField-vue.spec.ts.snap
 delete mode 100644 test/components/__snapshots__/TimeField.spec.ts.snap

diff --git a/playground-vue/src/app.vue b/playground-vue/src/app.vue
index 169d3517b7..4a8d076db8 100644
--- a/playground-vue/src/app.vue
+++ b/playground-vue/src/app.vue
@@ -40,6 +40,7 @@ const components = [
   'input',
   'input-menu',
   'input-number',
+  'input-time',
   'kbd',
   'link',
   'modal',
@@ -63,7 +64,6 @@ const components = [
   'textarea',
   'toast',
   'tooltip',
-  'time-field',
   'tree'
 ]
 
diff --git a/playground/app/app.vue b/playground/app/app.vue
index a6c522458d..a28f0cf0a5 100644
--- a/playground/app/app.vue
+++ b/playground/app/app.vue
@@ -40,6 +40,7 @@ const components = [
   'input',
   'input-menu',
   'input-number',
+  'input-time',
   'kbd',
   'link',
   'modal',
@@ -61,7 +62,6 @@ const components = [
   'tabs',
   'table',
   'textarea',
-  'time-field',
   'toast',
   'tooltip',
   'tree'
diff --git a/playground/app/pages/components/input-time.vue b/playground/app/pages/components/input-time.vue
new file mode 100644
index 0000000000..1ad59090d0
--- /dev/null
+++ b/playground/app/pages/components/input-time.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import { Time } from '@internationalized/date'
+import theme from '#build/ui/input'
+
+const sizes = Object.keys(theme.variants.size) as Array<keyof typeof theme.variants.size>
+const variants = Object.keys(theme.variants.variant) as Array<keyof typeof theme.variants.variant>
+
+// Default time values
+const defaultTime = ref(new Time(10, 30))
+const hourOnlyTime = ref(new Time(14, 0))
+const secondsTime = ref(new Time(9, 45, 30))
+const cycle24Time = ref(new Time(16, 30))
+</script>
+
+<template>
+  <div class="flex flex-col items-center gap-4">
+    <div class="flex flex-col gap-4 w-48">
+      <UInputTime v-model="defaultTime" />
+    </div>
+
+    <div class="flex items-center gap-2 flex-wrap justify-center">
+      <UInputTime
+        v-for="variant in variants"
+        :key="variant"
+        v-model="defaultTime"
+        :variant="variant"
+        class="w-48"
+      />
+    </div>
+
+    <div class="flex items-center gap-2 flex-wrap justify-center">
+      <UInputTime
+        v-for="variant in variants"
+        :key="variant"
+        v-model="defaultTime"
+        :variant="variant"
+        color="error"
+        highlight
+        class="w-48"
+      />
+    </div>
+
+    <div class="flex flex-col gap-4 w-48">
+      <UInputTime v-model="defaultTime" disabled />
+      <UInputTime v-model="defaultTime" required />
+      <UInputTime v-model="defaultTime" readonly />
+      <UInputTime v-model="hourOnlyTime" granularity="hour" />
+      <UInputTime v-model="secondsTime" granularity="second" />
+      <UInputTime v-model="cycle24Time" :hour-cycle="24" />
+      <UInputTime v-model="defaultTime" loading />
+      <UInputTime v-model="defaultTime" loading trailing />
+      <UInputTime v-model="defaultTime" icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" />
+    </div>
+
+    <div class="flex flex-wrap gap-4 justify-center">
+      <UInputTime v-for="size in sizes" :key="size" v-model="defaultTime" :size="size" class="w-48" />
+    </div>
+    <div class="flex flex-wrap gap-4 justify-center">
+      <UInputTime
+        v-for="size in sizes"
+        :key="size"
+        v-model="defaultTime"
+        icon="i-lucide-clock"
+        :size="size"
+        class="w-48"
+      />
+    </div>
+    <div class="flex flex-wrap gap-4 justify-center">
+      <UInputTime
+        v-for="size in sizes"
+        :key="size"
+        v-model="defaultTime"
+        icon="i-lucide-clock"
+        trailing
+        :size="size"
+        class="w-48"
+      />
+    </div>
+  </div>
+</template>
diff --git a/playground/app/pages/components/time-field.vue b/playground/app/pages/components/time-field.vue
deleted file mode 100644
index 422e315ff1..0000000000
--- a/playground/app/pages/components/time-field.vue
+++ /dev/null
@@ -1,171 +0,0 @@
-<script setup lang="ts">
-import { upperFirst } from 'scule'
-import { Time } from '@internationalized/date'
-
-// Define proper types for variants and sizes
-const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const
-const variants = ['outline', 'soft', 'subtle', 'ghost', 'none'] as const
-
-// Default time values
-const defaultTime = ref(new Time(10, 30))
-const hourOnlyTime = ref(new Time(14, 0))
-const secondsTime = ref(new Time(9, 45, 30))
-const cycle24Time = ref(new Time(16, 30))
-</script>
-
-<template>
-  <div class="flex flex-col items-center gap-8">
-    <div class="flex flex-col gap-4 w-48">
-      <h3 class="text-lg font-medium">
-        Default TimeField
-      </h3>
-      <UTimeField v-model="defaultTime" />
-    </div>
-
-    <div class="flex items-center gap-2 flex-wrap justify-center">
-      <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
-        <p class="text-sm mb-2">
-          {{ upperFirst(variant) }}
-        </p>
-        <UTimeField
-          v-model="defaultTime"
-          :variant="variant"
-          class="w-48"
-        />
-      </div>
-    </div>
-
-    <div class="flex items-center gap-2 flex-wrap justify-center">
-      <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
-        <p class="text-sm mb-2">
-          {{ upperFirst(variant) }} (Neutral)
-        </p>
-        <UTimeField
-          v-model="defaultTime"
-          :variant="variant"
-          color="neutral"
-          class="w-48"
-        />
-      </div>
-    </div>
-
-    <div class="flex items-center gap-2 flex-wrap justify-center">
-      <div v-for="variant in variants" :key="variant" class="flex flex-col items-center">
-        <p class="text-sm mb-2">
-          {{ upperFirst(variant) }} (Error)
-        </p>
-        <UTimeField
-          v-model="defaultTime"
-          :variant="variant"
-          color="error"
-          highlight
-          class="w-48"
-        />
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">
-        TimeField Variants
-      </h3>
-      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            Disabled
-          </p>
-          <UTimeField v-model="defaultTime" disabled />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            Required
-          </p>
-          <UTimeField v-model="defaultTime" required />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            Readonly
-          </p>
-          <UTimeField v-model="defaultTime" readonly />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            Hour only
-          </p>
-          <UTimeField v-model="hourOnlyTime" granularity="hour" />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            With seconds
-          </p>
-          <UTimeField v-model="secondsTime" granularity="second" />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            24 hour cycle
-          </p>
-          <UTimeField v-model="cycle24Time" :hour-cycle="24" />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            Loading
-          </p>
-          <UTimeField v-model="defaultTime" loading />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            Loading (trailing)
-          </p>
-          <UTimeField v-model="defaultTime" loading trailing />
-        </div>
-        <div class="flex flex-col gap-2">
-          <p class="text-sm">
-            With icons
-          </p>
-          <UTimeField v-model="defaultTime" icon="i-lucide-clock" trailing-icon="i-lucide-chevron-down" />
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">
-        TimeField Sizes
-      </h3>
-      <div class="flex flex-wrap gap-4 justify-center">
-        <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
-          <p class="text-sm mb-2">
-            {{ upperFirst(size) }}
-          </p>
-          <UTimeField v-model="defaultTime" :size="size" />
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">
-        TimeField with Leading Icon
-      </h3>
-      <div class="flex flex-wrap gap-4 justify-center">
-        <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
-          <p class="text-sm mb-2">
-            {{ upperFirst(size) }}
-          </p>
-          <UTimeField v-model="defaultTime" icon="i-lucide-clock" :size="size" />
-        </div>
-      </div>
-    </div>
-
-    <div class="flex flex-col gap-4">
-      <h3 class="text-lg font-medium">
-        TimeField with Trailing Icon
-      </h3>
-      <div class="flex flex-wrap gap-4 justify-center">
-        <div v-for="size in sizes" :key="size" class="flex flex-col items-center">
-          <p class="text-sm mb-2">
-            {{ upperFirst(size) }}
-          </p>
-          <UTimeField v-model="defaultTime" icon="i-lucide-clock" trailing :size="size" />
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index e212122d06..73184f9e08 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import type { NumberFieldRootProps } from 'reka-ui'
+import type { NumberFieldRootProps, NumberFieldRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input-number'
 import type { ButtonProps } from '../types'
@@ -62,10 +62,9 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   ui?: InputNumber['slots']
 }
 
-export interface InputNumberEmits {
-  (e: 'update:modelValue', payload: number): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', payload: Event): void
+export interface InputNumberEmits extends NumberFieldRootEmits {
+  blur: [event: FocusEvent]
+  change: [event: Event]
 }
 
 export interface InputNumberSlots {
diff --git a/src/runtime/components/TimeField.vue b/src/runtime/components/InputTime.vue
similarity index 53%
rename from src/runtime/components/TimeField.vue
rename to src/runtime/components/InputTime.vue
index aebb1c9ed1..a227cec1e5 100644
--- a/src/runtime/components/TimeField.vue
+++ b/src/runtime/components/InputTime.vue
@@ -1,74 +1,49 @@
 <script lang="ts">
+import type { TimeFieldRootProps, TimeFieldRootEmits } from 'reka-ui'
 import type { AppConfig } from '@nuxt/schema'
-import theme from '#build/ui/time-field'
+import theme from '#build/ui/input-time'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { ComponentConfig } from '../types/utils'
 
-type TimeField = ComponentConfig<typeof theme, AppConfig, 'timeField'>
+type InputTime = ComponentConfig<typeof theme, AppConfig, 'inputTime'>
 
-export interface TimeFieldProps extends UseComponentIconsProps {
+export interface InputTimeProps extends Pick<TimeFieldRootProps, 'defaultValue' | 'defaultPlaceholder' | 'placeholder' | 'modelValue' | 'hourCycle' | 'step' | 'granularity' | 'hideTimeZone' | 'minValue' | 'maxValue' | 'disabled' | 'readonly' | 'required' | 'id' | 'name' | 'required'>, UseComponentIconsProps {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
    */
   as?: any
-  id?: string
-  name?: string
-  /** The placeholder text when the input is empty. */
-  placeholder?: string
   /**
    * @defaultValue 'primary'
    */
-  color?: TimeField['variants']['color']
+  color?: InputTime['variants']['color']
   /**
    * @defaultValue 'outline'
    */
-  variant?: TimeField['variants']['variant']
+  variant?: InputTime['variants']['variant']
   /**
    * @defaultValue 'md'
    */
-  size?: TimeField['variants']['size']
-  required?: boolean
-  disabled?: boolean
-  readonly?: boolean
+  size?: InputTime['variants']['size']
   /** Highlight the ring color like a focus state. */
   highlight?: boolean
+  autofocus?: boolean
+  autofocusDelay?: number
   /**
-   * The granularity to use for formatting times.
-   * @defaultValue 'minute'
-   */
-  granularity?: 'hour' | 'minute' | 'second'
-  /**
-   * The hour cycle used for formatting times.
-   */
-  hourCycle?: 12 | 24
-  /**
-   * Whether to hide the time zone segment of the field
-   */
-  hideTimeZone?: boolean
-  /**
-   * The locale to use for formatting dates
+   * The locale to use for formatting and parsing numbers.
+   * @defaultValue UApp.locale.code
    */
   locale?: string
-  /**
-   * The minimum time that can be selected
-   */
-  minValue?: any
-  /**
-   * The maximum time that can be selected
-   */
-  maxValue?: any
   class?: any
-  ui?: TimeField['slots']
+  ui?: InputTime['slots']
 }
 
-export interface TimeFieldEmits {
-  (e: 'update:modelValue' | 'update:placeholder', payload: any): void
-  (e: 'blur', event: FocusEvent): void
-  (e: 'change', event: Event): void
+export interface InputTimeEmits extends TimeFieldRootEmits {
+  blur: [event: FocusEvent]
+  change: [event: Event]
 }
 
-export interface TimeFieldSlots {
+export interface InputTimeSlots {
   leading(props?: {}): any
   default(props?: {}): any
   trailing(props?: {}): any
@@ -76,41 +51,42 @@ export interface TimeFieldSlots {
 </script>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue'
-import { Primitive, TimeFieldRoot, TimeFieldInput } from 'reka-ui'
-import { Time } from '@internationalized/date'
+import { ref, computed, onMounted } from 'vue'
+import { Primitive, TimeFieldRoot, TimeFieldInput, useForwardPropsEmits } from 'reka-ui'
+import { reactivePick } from '@vueuse/core'
 import { useAppConfig } from '#imports'
 import { useButtonGroup } from '../composables/useButtonGroup'
 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'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<TimeFieldProps>(), {
+const props = withDefaults(defineProps<InputTimeProps>(), {
   granularity: 'minute',
   hideTimeZone: false
 })
-const emits = defineEmits<TimeFieldEmits>()
-const slots = defineSlots<TimeFieldSlots>()
+const emits = defineEmits<InputTimeEmits>()
+const slots = defineSlots<InputTimeSlots>()
 
-const [modelValue] = defineModel<any>()
+const { code: codeLocale } = useLocale()
+const appConfig = useAppConfig() as InputTime['AppConfig']
 
-// Default placeholder - when needed, use a Time object of 12:00
-const defaultPlaceholder = new Time(12, 0, 0)
+const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'hourCycle', 'step', 'granularity', 'hideTimeZone', 'readonly', 'required'), emits)
 
-const appConfig = useAppConfig() as TimeField['AppConfig']
-const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<TimeFieldProps>(props, { deferInputValidation: true })
-const { orientation, size: buttonGroupSize } = useButtonGroup<TimeFieldProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputTimeProps>(props)
+const { orientation, size: buttonGroupSize } = useButtonGroup<InputTimeProps>(props)
 const { isLeading, isTrailing, leadingIconName, trailingIconName } = useComponentIcons(props)
 
-const fieldSize = computed(() => buttonGroupSize.value || formGroupSize.value)
+const locale = computed(() => props.locale || codeLocale.value)
+const inputSize = computed(() => buttonGroupSize.value || formGroupSize.value)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeField || {}) })({
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.inputTime || {}) })({
   color: color.value,
   variant: props.variant,
-  size: fieldSize?.value,
+  size: inputSize?.value,
   loading: props.loading,
   highlight: highlight.value,
   leading: isLeading.value || !!slots.leading,
@@ -118,12 +94,15 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.timeField ||
   buttonGroup: orientation.value
 }))
 
-const fieldRef = ref<HTMLElement | null>(null)
+const inputRef = ref<InstanceType<typeof TimeFieldInput> | null>(null)
+
+function onUpdate(value: any) {
+  // @ts-expect-error - 'target' does not exist in type 'EventInit'
+  const event = new Event('change', { target: { value } })
+  emits('change', event)
 
-function updateValue(value: any) {
-  modelValue.value = value
-  emitFormInput()
   emitFormChange()
+  emitFormInput()
 }
 
 function onBlur(event: FocusEvent) {
@@ -131,33 +110,41 @@ function onBlur(event: FocusEvent) {
   emits('blur', event)
 }
 
+function autoFocus() {
+  if (props.autofocus) {
+    inputRef.value?.$el?.focus()
+  }
+}
+
+onMounted(() => {
+  setTimeout(() => {
+    autoFocus()
+  }, props.autofocusDelay)
+})
+
 defineExpose({
-  fieldRef
+  inputRef
 })
 </script>
 
 <template>
   <Primitive :as="as" :class="ui.root({ class: [props.class, props.ui?.root] })">
     <TimeFieldRoot
+      v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
       :id="id"
-      ref="fieldRef"
+      ref="inputRef"
+      v-slot="{ segments }"
       :name="name"
+      :default-value="defaultValue"
       :model-value="modelValue"
-      v-slot="{ segments }"
       :default-placeholder="defaultPlaceholder"
-      :granularity="granularity"
-      :hour-cycle="hourCycle"
-      :hide-time-zone="hideTimeZone"
-      :locale="locale"
-      :min-value="minValue"
+      :placeholder="placeholder"
       :max-value="maxValue"
+      :min-value="minValue"
+      :locale="locale"
       :disabled="disabled"
-      :readonly="readonly"
-      :required="required"
-      v-bind="{ ...ariaAttrs }"
-      class="flex h-full w-full items-center"
-      @update:model-value="updateValue"
-      @update:placeholder="$emit('update:placeholder', $event)"
+      :class="ui.base({ class: props.ui?.base })"
+      @update:model-value="onUpdate"
       @blur="onBlur"
       @focus="emitFormFocus"
     >
@@ -174,14 +161,15 @@ defineExpose({
           <TimeFieldInput
             v-if="segment.part === 'literal'"
             :part="segment.part"
-            :class="ui.base({ class: props.ui?.base })"
+            :class="ui.segment({ class: props.ui?.segment })"
           >
             {{ segment.value }}
           </TimeFieldInput>
+
           <TimeFieldInput
             v-else
             :part="segment.part"
-            :class="ui.base({ class: props.ui?.base })"
+            :class="ui.segment({ class: props.ui?.segment })"
           >
             {{ segment.value }}
           </TimeFieldInput>
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 40053098ef..d73fd54842 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -26,6 +26,7 @@ export * from '../components/Icon.vue'
 export * from '../components/Input.vue'
 export * from '../components/InputMenu.vue'
 export * from '../components/InputNumber.vue'
+export * from '../components/InputTime.vue'
 export * from '../components/Kbd.vue'
 export * from '../components/Link.vue'
 export * from '../components/Modal.vue'
@@ -46,7 +47,6 @@ export * from '../components/Switch.vue'
 export * from '../components/Table.vue'
 export * from '../components/Tabs.vue'
 export * from '../components/Textarea.vue'
-export * from '../components/TimeField.vue'
 export * from '../components/Toast.vue'
 export * from '../components/Toaster.vue'
 export * from '../components/Tooltip.vue'
diff --git a/src/theme/index.ts b/src/theme/index.ts
index a7acc948c5..0e67d8bffd 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -24,6 +24,7 @@ export { default as formField } from './form-field'
 export { default as input } from './input'
 export { default as inputMenu } from './input-menu'
 export { default as inputNumber } from './input-number'
+export { default as inputTime } from './input-time'
 export { default as kbd } from './kbd'
 export { default as link } from './link'
 export { default as modal } from './modal'
@@ -44,7 +45,6 @@ export { default as switch } from './switch'
 export { default as table } from './table'
 export { default as tabs } from './tabs'
 export { default as textarea } from './textarea'
-export { default as timeField } from './time-field'
 export { default as toast } from './toast'
 export { default as toaster } from './toaster'
 export { default as tooltip } from './tooltip'
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
new file mode 100644
index 0000000000..72e536fea7
--- /dev/null
+++ b/src/theme/input-time.ts
@@ -0,0 +1,11 @@
+import { defu } from 'defu'
+import type { ModuleOptions } from '../module'
+import input from './input'
+
+export default (options: Required<ModuleOptions>) => {
+  return defu({
+    slots: {
+      segment: ''
+    }
+  }, input(options))
+}
diff --git a/src/theme/time-field.ts b/src/theme/time-field.ts
deleted file mode 100644
index 6841ce5950..0000000000
--- a/src/theme/time-field.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import type { ModuleOptions } from '../module'
-import { buttonGroupVariantWithRoot } from './button-group'
-
-export default (options: Required<ModuleOptions>) => ({
-  slots: {
-    root: 'relative inline-flex items-center border rounded-md',
-    base: ['mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed', options.theme.transitions && 'transition-colors'],
-    leading: 'flex items-center h-full px-2',
-    leadingIcon: 'shrink-0 text-dimmed',
-    trailing: 'flex items-center h-full px-2',
-    trailingIcon: 'shrink-0 text-dimmed'
-  },
-  variants: {
-    ...buttonGroupVariantWithRoot,
-    size: {
-      xs: {
-        root: 'text-xs',
-        base: 'py-1 text-xs',
-        leadingIcon: 'size-4',
-        trailingIcon: 'size-4'
-      },
-      sm: {
-        root: 'text-xs',
-        base: 'py-1.5 text-xs',
-        leadingIcon: 'size-4',
-        trailingIcon: 'size-4'
-      },
-      md: {
-        root: 'text-sm',
-        base: 'py-1.5 text-sm',
-        leadingIcon: 'size-5',
-        trailingIcon: 'size-5'
-      },
-      lg: {
-        root: 'text-sm',
-        base: 'py-2 text-sm',
-        leadingIcon: 'size-5',
-        trailingIcon: 'size-5'
-      },
-      xl: {
-        root: 'text-base',
-        base: 'py-2 text-base',
-        leadingIcon: 'size-6',
-        trailingIcon: 'size-6'
-      }
-    },
-    variant: {
-      outline: {
-        root: 'border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500'
-      },
-      soft: {
-        root: 'border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50'
-      },
-      subtle: {
-        root: 'border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500'
-      },
-      ghost: {
-        root: 'border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent'
-      },
-      none: {
-        root: 'border-transparent text-highlighted bg-transparent'
-      }
-    },
-    color: {
-      ...Object.fromEntries((options.theme.colors || []).map((color: string) => [color, ''])),
-      neutral: ''
-    },
-    leading: {
-      true: ''
-    },
-    trailing: {
-      true: ''
-    },
-    loading: {
-      true: ''
-    },
-    highlight: {
-      true: ''
-    }
-  },
-  compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
-    color,
-    variant: ['outline', 'subtle'],
-    class: {
-      root: `data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-${color}`
-    }
-  })), ...(options.theme.colors || []).map((color: string) => ({
-    color,
-    highlight: true,
-    class: {
-      root: `ring ring-inset ring-${color}`
-    }
-  })), {
-    color: 'neutral',
-    variant: ['outline', 'subtle'],
-    class: {
-      root: 'data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted'
-    }
-  }, {
-    color: 'neutral',
-    highlight: true,
-    class: {
-      root: 'ring ring-inset ring-inverted'
-    }
-  }, {
-    leading: true,
-    size: 'xs',
-    class: {}
-  }, {
-    leading: true,
-    size: 'sm',
-    class: {}
-  }, {
-    leading: true,
-    size: 'md',
-    class: {}
-  }, {
-    leading: true,
-    size: 'lg',
-    class: {}
-  }, {
-    leading: true,
-    size: 'xl',
-    class: {}
-  }, {
-    trailing: true,
-    size: 'xs',
-    class: {}
-  }, {
-    trailing: true,
-    size: 'sm',
-    class: {}
-  }, {
-    trailing: true,
-    size: 'md',
-    class: {}
-  }, {
-    trailing: true,
-    size: 'lg',
-    class: {}
-  }, {
-    trailing: true,
-    size: 'xl',
-    class: {}
-  }, {
-    loading: true,
-    leading: true,
-    class: {
-      leadingIcon: 'animate-spin'
-    }
-  }, {
-    loading: true,
-    leading: false,
-    trailing: true,
-    class: {
-      trailingIcon: 'animate-spin'
-    }
-  }],
-  defaultVariants: {
-    size: 'md',
-    color: 'primary',
-    variant: 'outline'
-  }
-})
diff --git a/test/components/TimeField.spec.ts b/test/components/InputTime.spec.ts
similarity index 79%
rename from test/components/TimeField.spec.ts
rename to test/components/InputTime.spec.ts
index 309f70f73e..a17591bceb 100644
--- a/test/components/TimeField.spec.ts
+++ b/test/components/InputTime.spec.ts
@@ -1,11 +1,11 @@
 import { describe, it, expect, test } from 'vitest'
 import { mount } from '@vue/test-utils'
 import { Time } from '@internationalized/date'
-import TimeField, { type TimeFieldProps, type TimeFieldSlots } from '../../src/runtime/components/TimeField.vue'
+import InputTime, { type InputTimeProps, type InputTimeSlots } from '../../src/runtime/components/InputTime.vue'
 import ComponentRender from '../component-render'
-import theme from '#build/ui/time-field'
+import theme from '#build/ui/input-time'
 
-describe('TimeField', () => {
+describe('InputTime', () => {
   const sizes = Object.keys(theme.variants.size) as any
   const variants = Object.keys(theme.variants.variant) as any
   const defaultTime = new Time(10, 30)
@@ -46,45 +46,45 @@ describe('TimeField', () => {
     ['with default slot', { slots: { default: () => 'Default slot' } }],
     ['with leading slot', { slots: { leading: () => 'Leading slot' } }],
     ['with trailing slot', { slots: { trailing: () => 'Trailing slot' } }]
-  ])('renders %s correctly', async (nameOrHtml: string, options: { props?: TimeFieldProps, slots?: Partial<TimeFieldSlots> }) => {
-    const html = await ComponentRender(nameOrHtml, options, TimeField)
+  ])('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 = mount(TimeField, {
+      const wrapper = mount(InputTime, {
         props: {
           modelValue: defaultTime
         }
       })
 
-      // Find the TimeFieldRoot component and trigger update:model-value event
-      const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' })
+      // Find the InputTimeRoot component and trigger update:model-value event
+      const InputTimeRoot = wrapper.findComponent({ name: 'InputTimeRoot' })
       const newTime = new Time(14, 45)
 
-      await timeFieldRoot.vm.$emit('update:model-value', newTime)
+      await InputTimeRoot.vm.$emit('update:model-value', newTime)
 
       expect(wrapper.emitted()).toHaveProperty('update:modelValue')
       expect(wrapper.emitted()['update:modelValue'][0]).toEqual([newTime])
     })
 
     test('blur event', async () => {
-      const wrapper = mount(TimeField)
-      const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' })
+      const wrapper = mount(InputTime)
+      const InputTimeRoot = wrapper.findComponent({ name: 'InputTimeRoot' })
 
-      await timeFieldRoot.vm.$emit('blur', { type: 'blur' })
+      await InputTimeRoot.vm.$emit('blur', { type: 'blur' })
 
       expect(wrapper.emitted()).toHaveProperty('blur')
       expect(wrapper.emitted().blur[0]).toEqual([{ type: 'blur' }])
     })
 
     test('update:placeholder event', async () => {
-      const wrapper = mount(TimeField)
-      const timeFieldRoot = wrapper.findComponent({ name: 'TimeFieldRoot' })
+      const wrapper = mount(InputTime)
+      const InputTimeRoot = wrapper.findComponent({ name: 'InputTimeRoot' })
       const placeholder = new Time(12, 0)
 
-      await timeFieldRoot.vm.$emit('update:placeholder', placeholder)
+      await InputTimeRoot.vm.$emit('update:placeholder', placeholder)
 
       expect(wrapper.emitted()).toHaveProperty('update:placeholder')
       expect(wrapper.emitted()['update:placeholder'][0]).toEqual([placeholder])
diff --git a/test/components/__snapshots__/TimeField-vue.spec.ts.snap b/test/components/__snapshots__/TimeField-vue.spec.ts.snap
deleted file mode 100644
index f0a2eabc17..0000000000
--- a/test/components/__snapshots__/TimeField-vue.spec.ts.snap
+++ /dev/null
@@ -1,837 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`TimeField > renders with 12 hour cycle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with 24 hour cycle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</section>"
-`;
-
-exports[`TimeField > renders with class correctly 1`] = `
-"<div class="inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary absolute">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div>Default slot
-    <!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" disabled="" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with granularity hour correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with granularity minute correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with granularity second correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="second, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="second" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with hideTimeZone correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="id" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2">Leading slot</span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></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;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5 animate-spin" width="1em" height="1em" viewBox="0 0 16 16"></svg></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with locale correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with maxValue correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with minValue correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="name" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with readonly correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" data-readonly="" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" required="" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-base border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></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;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="shrink-0 text-dimmed size-5" width="1em" height="1em" viewBox="0 0 16 16"></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;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
diff --git a/test/components/__snapshots__/TimeField.spec.ts.snap b/test/components/__snapshots__/TimeField.spec.ts.snap
deleted file mode 100644
index 3ba8422e20..0000000000
--- a/test/components/__snapshots__/TimeField.spec.ts.snap
+++ /dev/null
@@ -1,837 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`TimeField > renders with 12 hour cycle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <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="12" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="hour" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with 24 hour cycle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with ariaLabel correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with as correctly 1`] = `
-"<section class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</section>"
-`;
-
-exports[`TimeField > renders with class correctly 1`] = `
-"<div class="inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary absolute">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with default slot correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div>Default slot
-    <!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with disabled correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" aria-disabled="true" data-disabled="" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-disabled="true" data-disabled="" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" disabled="" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with granularity hour correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with granularity minute correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with granularity second correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="second, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="second" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with hideTimeZone correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with icon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with id correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" id="id" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with leading and icon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with leading slot correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2">Leading slot</span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with leadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:clock shrink-0 text-dimmed size-5" aria-hidden="true"></span></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with loading correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:refresh-cw shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with loading trailing correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:refresh-cw shrink-0 text-dimmed size-5 animate-spin" 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;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with loadingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:loader shrink-0 text-dimmed size-5 animate-spin" aria-hidden="true"></span></span><!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with locale correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with maxValue correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with minValue correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with name correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" name="name" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant none correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with neutral variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-inverted">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with placeholder correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant ghost correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent hover:bg-elevated focus-within:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant none correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-transparent">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant outline correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant soft correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-transparent text-highlighted bg-elevated/50 hover:bg-elevated focus-within:bg-elevated disabled:bg-elevated/50">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with primary variant subtle correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-elevated data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with readonly correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" data-readonly="" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <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="Empty" data-placeholder="" data-reka-time-field-segment="hour" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</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="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </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="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" aria-readonly="true" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with required correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" required="" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size lg correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size md correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size sm correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-xs"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size xl correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-base border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-2 text-base"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with size xs correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-xs border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1 text-xs"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with trailing and icon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:chevron-down 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;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with trailing slot correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2">Trailing slot</span><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with trailingIcon correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated rounded focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm"> </div>
-    </div><!-- Trailing Icon/Slot --><span class="flex items-center h-full px-2"><span class="iconify i-lucide:chevron-down 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;" value="">
-  </div>
-</div>"
-`;
-
-exports[`TimeField > renders with ui correctly 1`] = `
-"<div class="relative inline-flex items-center border rounded-md text-sm border-accented text-highlighted bg-default data-[invalid]:ring data-[invalid]:ring-inset data-[invalid]:ring-red-500 data-[focus-within]:ring-2 data-[focus-within]:ring-inset data-[focus-within]:ring-primary">
-  <div class="flex h-full w-full items-center" role="group" dir="ltr">
-    <!-- Leading Icon/Slot -->
-    <!--v-if-->
-    <!-- Time Field Segments -->
-    <div class="flex flex-1 items-center justify-center">
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" 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="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">:</div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="numeric" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="minute, " aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="Empty" data-placeholder="" data-reka-time-field-segment="minute" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">––</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
-      <div role="spinbutton" contenteditable="true" tabindex="0" spellcheck="false" inputmode="text" autocorrect="off" enterkeyhint="next" style="caret-color: transparent;" aria-label="AM/PM" aria-valuemin="0" aria-valuemax="12" aria-valuenow="0" aria-valuetext="AM" data-reka-time-field-segment="dayPeriod" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full">AM</div>
-      <div aria-hidden="true" data-segment="literal" contenteditable="false" data-reka-time-field-segment="literal" class="mx-0.5 focus:outline-none focus:bg-elevated focus:shadow-[0_0_0_1px] focus:shadow-black data-[placeholder]:text-dimmed transition-colors py-1.5 text-sm rounded-full"> </div>
-    </div><!-- Trailing Icon/Slot -->
-    <!--v-if--><input aria-hidden="true" tabindex="-1" style="position: absolute; border: 0px; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal;" value="">
-  </div>
-</div>"
-`;

From e2f0b663966d9ad2cc9e679f326f8fa952cc4d35 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 28 May 2025 17:22:10 +0200
Subject: [PATCH 8/9] up

---
 .../examples/form/FormExampleElements.vue     |  5 +++
 .../app/pages/components/input-time.vue       |  2 +-
 src/runtime/components/InputNumber.vue        |  3 +-
 src/runtime/components/InputTime.vue          | 35 ++++++-------------
 src/theme/input-time.ts                       | 35 ++++++++++++++++---
 test/components/FormField.spec.ts             |  4 +--
 6 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/docs/app/components/content/examples/form/FormExampleElements.vue b/docs/app/components/content/examples/form/FormExampleElements.vue
index 4ab598da3e..1e0e0e5dd8 100644
--- a/docs/app/components/content/examples/form/FormExampleElements.vue
+++ b/docs/app/components/content/examples/form/FormExampleElements.vue
@@ -11,6 +11,7 @@ const schema = z.object({
   inputMenuMultiple: z.any().refine(values => !!values?.find((option: any) => option.value === 'option-2'), {
     message: 'Include Option 2'
   }),
+  inputTime: z.string().min(10),
   textarea: z.string().min(10),
   select: z.string().refine(value => value === 'option-2', {
     message: 'Select Option 2'
@@ -101,6 +102,10 @@ async function onSubmit(event: FormSubmitEvent<Schema>) {
         <UInputNumber v-model="state.inputNumber" class="w-full" />
       </UFormField>
 
+      <UFormField name="inputTime" label="Input Time">
+        <UInputTime v-model="state.inputTime" class="w-full" />
+      </UFormField>
+
       <UFormField label="Textarea" name="textarea">
         <UTextarea v-model="state.textarea" class="w-full" />
       </UFormField>
diff --git a/playground/app/pages/components/input-time.vue b/playground/app/pages/components/input-time.vue
index 1ad59090d0..776559fc4d 100644
--- a/playground/app/pages/components/input-time.vue
+++ b/playground/app/pages/components/input-time.vue
@@ -15,7 +15,7 @@ const cycle24Time = ref(new Time(16, 30))
 <template>
   <div class="flex flex-col items-center gap-4">
     <div class="flex flex-col gap-4 w-48">
-      <UInputTime v-model="defaultTime" />
+      <UInputTime v-model="defaultTime" autofocus />
     </div>
 
     <div class="flex items-center gap-2 flex-wrap justify-center">
diff --git a/src/runtime/components/InputNumber.vue b/src/runtime/components/InputNumber.vue
index 73184f9e08..a99a685257 100644
--- a/src/runtime/components/InputNumber.vue
+++ b/src/runtime/components/InputNumber.vue
@@ -89,7 +89,8 @@ defineOptions({ inheritAttrs: false })
 const props = withDefaults(defineProps<InputNumberProps>(), {
   orientation: 'horizontal',
   disabledIncrement: false,
-  disabledDecrement: false
+  disabledDecrement: false,
+  autofocusDelay: 0
 })
 const emits = defineEmits<InputNumberEmits>()
 defineSlots<InputNumberSlots>()
diff --git a/src/runtime/components/InputTime.vue b/src/runtime/components/InputTime.vue
index a227cec1e5..d96f989062 100644
--- a/src/runtime/components/InputTime.vue
+++ b/src/runtime/components/InputTime.vue
@@ -65,8 +65,7 @@ import UIcon from './Icon.vue'
 defineOptions({ inheritAttrs: false })
 
 const props = withDefaults(defineProps<InputTimeProps>(), {
-  granularity: 'minute',
-  hideTimeZone: false
+  autofocusDelay: 0
 })
 const emits = defineEmits<InputTimeEmits>()
 const slots = defineSlots<InputTimeSlots>()
@@ -148,37 +147,23 @@ defineExpose({
       @blur="onBlur"
       @focus="emitFormFocus"
     >
-      <!-- Leading Icon/Slot -->
+      <TimeFieldInput
+        v-for="segment in segments"
+        :key="segment.part"
+        :part="segment.part"
+        :class="ui.segment({ class: props.ui?.segment })"
+      >
+        {{ segment.value }}
+      </TimeFieldInput>
+
       <span v-if="isLeading || !!slots.leading" :class="ui.leading({ class: props.ui?.leading })">
         <slot name="leading">
           <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.leadingIcon({ class: props.ui?.leadingIcon })" />
         </slot>
       </span>
 
-      <!-- Time Field Segments -->
-      <div class="flex flex-1 items-center justify-center">
-        <template v-for="segment in segments" :key="segment.part">
-          <TimeFieldInput
-            v-if="segment.part === 'literal'"
-            :part="segment.part"
-            :class="ui.segment({ class: props.ui?.segment })"
-          >
-            {{ segment.value }}
-          </TimeFieldInput>
-
-          <TimeFieldInput
-            v-else
-            :part="segment.part"
-            :class="ui.segment({ class: props.ui?.segment })"
-          >
-            {{ segment.value }}
-          </TimeFieldInput>
-        </template>
-      </div>
-
       <slot />
 
-      <!-- Trailing Icon/Slot -->
       <span v-if="isTrailing || !!slots.trailing" :class="ui.trailing({ class: props.ui?.trailing })">
         <slot name="trailing">
           <UIcon v-if="trailingIconName" :name="trailingIconName" :class="ui.trailingIcon({ class: props.ui?.trailingIcon })" />
diff --git a/src/theme/input-time.ts b/src/theme/input-time.ts
index 72e536fea7..bc75918066 100644
--- a/src/theme/input-time.ts
+++ b/src/theme/input-time.ts
@@ -1,11 +1,38 @@
-import { defu } from 'defu'
+import { defuFn } from 'defu'
 import type { ModuleOptions } from '../module'
 import input from './input'
 
 export default (options: Required<ModuleOptions>) => {
-  return defu({
+  return defuFn({
     slots: {
-      segment: ''
-    }
+      base: () => ['w-full select-none relative group rounded-md inline-flex items-center focus:outline-none !gap-0', options.theme.transitions && 'transition-colors'],
+      segment: 'focus:bg-muted data-invalid:data-focused:bg-error data-focused:data-placeholder:text-muted data-focused:text-highlighted data-invalid:data-placeholder:text-error data-invalid:text-error data-placeholder:text-muted data-[segment=literal]:text-muted rounded px-1 data-[segment=literal]:px-0 outline-hidden data-disabled:cursor-not-allowed data-disabled:opacity-75 data-invalid:data-focused:text-white data-invalid:data-focused:data-placeholder:text-white'
+    },
+    variants: {
+      variant: {
+        outline: 'text-highlighted bg-default ring ring-inset ring-accented',
+        soft: 'text-highlighted bg-elevated/50 hover:bg-elevated focus:bg-elevated disabled:bg-elevated/50',
+        subtle: 'text-highlighted bg-elevated ring ring-inset ring-accented',
+        ghost: 'text-highlighted bg-transparent hover:bg-elevated focus:bg-elevated disabled:bg-transparent dark:disabled:bg-transparent',
+        none: 'text-highlighted bg-transparent'
+      }
+    },
+    compoundVariants: [...(options.theme.colors || []).map((color: string) => ({
+      color,
+      variant: ['outline', 'subtle'],
+      class: `focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-${color}`
+    })), ...(options.theme.colors || []).map((color: string) => ({
+      color,
+      highlight: true,
+      class: `ring ring-inset ring-${color}`
+    })), {
+      color: 'neutral',
+      variant: ['outline', 'subtle'],
+      class: 'focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-inverted'
+    }, {
+      color: 'neutral',
+      highlight: true,
+      class: 'ring ring-inset ring-inverted'
+    }]
   }, input(options))
 }
diff --git a/test/components/FormField.spec.ts b/test/components/FormField.spec.ts
index c15ac6e379..b352b233c9 100644
--- a/test/components/FormField.spec.ts
+++ b/test/components/FormField.spec.ts
@@ -14,14 +14,14 @@ import {
   USelectMenu,
   UInputMenu,
   UInputNumber,
+  UInputTime,
   USwitch,
   USlider,
   UPinInput,
   UFormField
-
 } from '#components'
 
-const inputComponents = [UInput, URadioGroup, UTextarea, UCheckbox, USelect, USelectMenu, UInputMenu, UInputNumber, USwitch, USlider, UPinInput]
+const inputComponents = [UInput, URadioGroup, UTextarea, UCheckbox, USelect, USelectMenu, UInputMenu, UInputNumber, UInputTime, USwitch, USlider, UPinInput]
 
 async function renderFormField(options: {
   props: Partial<FormFieldProps>

From c8c407a16b4845366df10dfed8d6e766fc608bb6 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Thu, 12 Jun 2025 12:40:44 +0200
Subject: [PATCH 9/9] docs(showcase): improve file parse

---
 docs/modules/showcase.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/modules/showcase.ts b/docs/modules/showcase.ts
index 3486c908b5..cd9ba17996 100644
--- a/docs/modules/showcase.ts
+++ b/docs/modules/showcase.ts
@@ -33,7 +33,7 @@ export default defineNuxtModule((_, nuxt) => {
       }
 
       const name = template.name.toLowerCase().replace(/\s/g, '-')
-      const filename = join(process.cwd(), 'docs/public/assets/showcase', `${name}.png`)
+      const filename = join(nuxt.options.rootDir, 'public/assets/showcase', `${name}.png`)
 
       if (existsSync(filename)) {
         continue