feat(eidos): add TimeField + ColorField wrappers and demos

Mirrors the date-field pattern (Provider visual root + Label / Input /
Segment / HiddenInput parts; ColorField also exposes FormatSelect).
Soma owns segment editing, ARIA spinbuttons, validation, format
switching and form submission; Eidos adds size (xs..xl), control
variant (surface/outline/ghost) and intent color recipes.

Adds time-field and color-field recipe sections to recipes/base.ts
(regenerated generated/base.css) and registers both routes in the
sidebar nav. apg=spinbutton declared on both morfos. READMEs follow
the Baseline / Superficie / Comparativa / Decisiones / Gaps /
Referencias template required by audit F-1.x.

All 67 component-audit components PASS, 38/38 morfo:check PASS,
svelte-check 0 errors/0 warnings.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

src/uix/eidos/components/color-field/README.md

@@ -0,0 +1,84 @@
+# Eidos ColorField
+
+Segmented color input. Soma owns format switching (hex/rgb/hsl), channel
+editing, alpha, ARIA spinbuttons and validation. Eidos adds size,
+variant, intent color and recipe styling on top.
+
+## Baseline
+
+Air no tenía un `ColorField` segmentado en la rama anterior — sólo un
+`ColorPicker` con saturación + hue + alpha. La referencia local real
+es Soma `color-field`, que es **único en UIX**: ningún framework
+externo (Ark, Chakra, Bits) ofrece edición canal-a-canal de un color
+como segmentos accesibles. La receta Eidos sólo envuelve la superficie
+Soma con tamaños, variante visual y paleta de intents. Referencias
+externas para format switcher / alpha: Ark UI Color Picker, Chakra
+Color Picker, Bits UI Color Picker.
+
+## Superficie
+
+```svelte
+<ColorField bind:value bind:format placeholder={brandColor} size="md" variant="surface" color="primary">
+	<ColorField.Label>Brand color</ColorField.Label>
+	<ColorField.Input name="brand">
+		{#snippet children({ segments })}
+			{#each segments as { part, value } (part + value)}
+				<ColorField.Segment {part}>{value}</ColorField.Segment>
+			{/each}
+			<ColorField.FormatSelect />
+		{/snippet}
+	</ColorField.Input>
+</ColorField>
+```
+
+Partes públicas: `Label`, `Input`, `Segment`, `FormatSelect`, `HiddenInput`.
+
+## Comparativa
+
+| Capacidad | Soma/Eidos | Ark UI | Chakra UI | Bits UI |
+| --- | --- | --- | --- | --- |
+| Input segmentado (canal a canal) | Sí | No | No | No |
+| Format switch hex/rgb/hsl | Sí | Sí | Sí | Sí |
+| Canal alpha | Sí (opt-in) | Sí | Sí | Sí |
+| `allowedFormats` whitelist | Sí | No | No | No |
+| Validación custom | Sí | Sí | Sí | Sí |
+| Segmentos readonly | Sí | No | No | No |
+| Input hidden para forms | Sí | Vía picker | Vía picker | Vía picker |
+| Integración con Field | Sí | — | — | — |
+| Variante / tamaño / paleta visual | Sí, Eidos | CSS externo | CSS externo | CSS externo |
+
+## Decisiones
+
+- No se exporta `Provider` ni `Root` público. La forma Eidos es
+  `<ColorField>` con hijos attached.
+- Eidos no implementa saturación/área, hue slider ni swatches. Eso
+  pertenece a `ColorPicker`, no a `ColorField`.
+- `ColorValue` mantiene `hex / rgb / hsl / hsv` en sincronía. Al editar
+  un canal el provider escribe contra el formato autoritativo (sin
+  redondeo cruzado HSV ↔ RGB).
+- `format` es bindable y drives qué segmentos se renderizan.
+  `allowedFormats` controla qué opciones expone `FormatSelect`. Cuando
+  `allowedFormats.length === 1`, el select queda visualmente bloqueado
+  (`data-locked`).
+- `enableAlpha={false}` quita el segmento alpha; `readonlySegments` lo
+  permite mantener visible pero no editable.
+- `size`, `variant` y `color` pertenecen a Eidos. Resto (value,
+  placeholder, format, allowedFormats, enableAlpha, readonlySegments,
+  validación) pertenece a Soma.
+
+## Gaps
+
+| Gap | Disposición | Detalle |
+| --- | --- | --- |
+| ColorPicker (saturación + hue + alpha + swatches) | **implementar** | Commit independiente. ColorField cubre el caso "type the hex"; ColorPicker cubre el caso "explore". |
+| Tests browser-level del flujo completo (Playwright) | **implementar** | Cobertura visual + interacciones (canal Arrow/Backspace, format switch). Se hace en una pasada conjunta de tests. |
+| Eye dropper API | **diferir** | Sólo en navegadores con `EyeDropper`. Pasa al picker. |
+| Documentación per-prop exhaustiva | **diferir** | Cubierto por la tabla de la demo (`API` tab). |
+
+## Referencias
+
+- Soma ColorField: `src/uix/soma/components/color-field/README.md`
+- Ark UI Color Picker: https://ark-ui.com/docs/components/color-picker
+- Chakra UI Color Picker: https://chakra-ui.com/docs/components/color-picker
+- Bits UI Color Picker: https://bits-ui.com/docs/components/color-picker
+- WAI-ARIA APG Spinbutton: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/

src/uix/eidos/components/color-field/color-field-format-select.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as ColorField from '$soma/components/color-field';
+	import type { ColorFieldFormatSelectProps } from './types';
+
+	let { children, ...rest }: ColorFieldFormatSelectProps = $props();
+</script>
+
+<ColorField.FormatSelect {...rest}>
+	{@render children?.()}
+</ColorField.FormatSelect>

src/uix/eidos/components/color-field/color-field-hidden-input.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import * as ColorField from '$soma/components/color-field';
+</script>
+
+<ColorField.HiddenInput />

src/uix/eidos/components/color-field/color-field-input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as ColorField from '$soma/components/color-field';
+	import type { ColorFieldInputProps, ColorFieldInputSnippetProps } from './types';
+
+	let { children: bodyContent, ...rest }: ColorFieldInputProps = $props();
+</script>
+
+<ColorField.Input {...rest}>
+	{#snippet children(args: ColorFieldInputSnippetProps)}
+		{@render bodyContent?.(args)}
+	{/snippet}
+</ColorField.Input>

src/uix/eidos/components/color-field/color-field-label.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as ColorField from '$soma/components/color-field';
+	import type { ColorFieldLabelProps } from './types';
+
+	let { children, ...rest }: ColorFieldLabelProps = $props();
+</script>
+
+<ColorField.Label {...rest}>
+	{@render children?.()}
+</ColorField.Label>

src/uix/eidos/components/color-field/color-field-segment.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as ColorField from '$soma/components/color-field';
+	import type { ColorFieldSegmentProps } from './types';
+
+	let { children, ...rest }: ColorFieldSegmentProps = $props();
+</script>
+
+<ColorField.Segment {...rest}>
+	{@render children?.()}
+</ColorField.Segment>

src/uix/eidos/components/color-field/color-field.css

@@ -0,0 +1,228 @@
+[data-color-field] {
+	--_color-field-height: var(--color-field-height-md);
+	--_color-field-px: var(--color-field-px-md);
+	--_color-field-gap: var(--color-field-gap-md);
+	--_color-field-segment-px: var(--color-field-segment-px-md);
+	--_color-field-font-size: var(--color-field-font-size-md);
+	--_color-field-swatch-size: var(--color-field-swatch-size-md);
+	--_color-field-accent-border: var(--color-primary-border);
+	--_color-field-accent-track: var(--color-primary-track);
+	--_color-field-accent-text: var(--color-primary-text);
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: var(--color-field-stack-gap);
+	inline-size: 100%;
+	min-inline-size: 0;
+	color: var(--color-field-color);
+	font-family: var(--color-field-font-family);
+	font-size: var(--_color-field-font-size);
+	line-height: var(--color-field-line-height);
+}
+
+[data-color-field][data-size='xs'] {
+	--_color-field-height: var(--color-field-height-xs);
+	--_color-field-px: var(--color-field-px-xs);
+	--_color-field-gap: var(--color-field-gap-xs);
+	--_color-field-segment-px: var(--color-field-segment-px-xs);
+	--_color-field-font-size: var(--color-field-font-size-xs);
+	--_color-field-swatch-size: var(--color-field-swatch-size-xs);
+}
+
+[data-color-field][data-size='sm'] {
+	--_color-field-height: var(--color-field-height-sm);
+	--_color-field-px: var(--color-field-px-sm);
+	--_color-field-gap: var(--color-field-gap-sm);
+	--_color-field-segment-px: var(--color-field-segment-px-sm);
+	--_color-field-font-size: var(--color-field-font-size-sm);
+	--_color-field-swatch-size: var(--color-field-swatch-size-sm);
+}
+
+[data-color-field][data-size='lg'] {
+	--_color-field-height: var(--color-field-height-lg);
+	--_color-field-px: var(--color-field-px-lg);
+	--_color-field-gap: var(--color-field-gap-lg);
+	--_color-field-segment-px: var(--color-field-segment-px-lg);
+	--_color-field-font-size: var(--color-field-font-size-lg);
+	--_color-field-swatch-size: var(--color-field-swatch-size-lg);
+}
+
+[data-color-field][data-size='xl'] {
+	--_color-field-height: var(--color-field-height-xl);
+	--_color-field-px: var(--color-field-px-xl);
+	--_color-field-gap: var(--color-field-gap-xl);
+	--_color-field-segment-px: var(--color-field-segment-px-xl);
+	--_color-field-font-size: var(--color-field-font-size-xl);
+	--_color-field-swatch-size: var(--color-field-swatch-size-xl);
+}
+
+[data-color-field][data-color='secondary'] {
+	--_color-field-accent-border: var(--color-secondary-border);
+	--_color-field-accent-track: var(--color-secondary-track);
+	--_color-field-accent-text: var(--color-secondary-text);
+}
+
+[data-color-field][data-color='neutral'] {
+	--_color-field-accent-border: var(--color-neutral-border);
+	--_color-field-accent-track: var(--color-neutral-track);
+	--_color-field-accent-text: var(--color-neutral-text);
+}
+
+[data-color-field][data-color='affirm'] {
+	--_color-field-accent-border: var(--color-affirm-border);
+	--_color-field-accent-track: var(--color-affirm-track);
+	--_color-field-accent-text: var(--color-affirm-text);
+}
+
+[data-color-field][data-color='fulfill'] {
+	--_color-field-accent-border: var(--color-fulfill-border);
+	--_color-field-accent-track: var(--color-fulfill-track);
+	--_color-field-accent-text: var(--color-fulfill-text);
+}
+
+[data-color-field][data-color='risk'] {
+	--_color-field-accent-border: var(--color-risk-border);
+	--_color-field-accent-track: var(--color-risk-track);
+	--_color-field-accent-text: var(--color-risk-text);
+}
+
+[data-color-field][data-color='threat'] {
+	--_color-field-accent-border: var(--color-threat-border);
+	--_color-field-accent-track: var(--color-threat-track);
+	--_color-field-accent-text: var(--color-threat-text);
+}
+
+[data-color-field][data-color='loss'] {
+	--_color-field-accent-border: var(--color-loss-border);
+	--_color-field-accent-track: var(--color-loss-track);
+	--_color-field-accent-text: var(--color-loss-text);
+}
+
+[data-color-field-label] {
+	color: var(--color-field-label-color);
+	font: inherit;
+	font-weight: var(--color-field-label-font-weight);
+}
+
+[data-color-field-input] {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--_color-field-gap);
+	min-inline-size: 0;
+	inline-size: 100%;
+	min-block-size: var(--_color-field-height);
+	padding-inline: var(--_color-field-px);
+	border: var(--color-field-border-width) solid var(--color-field-border);
+	border-radius: var(--color-field-radius);
+	background: var(--color-field-bg);
+	color: inherit;
+	transition:
+		background var(--color-field-transition-duration) var(--color-field-transition-ease),
+		border-color var(--color-field-transition-duration) var(--color-field-transition-ease),
+		box-shadow var(--color-field-transition-duration) var(--color-field-transition-ease);
+}
+
+[data-color-field][data-variant='outline'] [data-color-field-input] {
+	background: transparent;
+}
+
+[data-color-field][data-variant='ghost'] [data-color-field-input] {
+	border-color: transparent;
+	background: transparent;
+	padding-inline: 0;
+}
+
+[data-color-field-input]:has([data-color-field-segment]:focus-visible) {
+	border-color: var(--_color-field-accent-border);
+	box-shadow: var(--color-field-focus-shadow);
+}
+
+[data-color-field][data-invalid] [data-color-field-input],
+[data-color-field-input][data-invalid] {
+	border-color: var(--color-field-border-invalid);
+}
+
+[data-color-field][data-disabled],
+[data-color-field-input][data-disabled] {
+	opacity: var(--color-field-disabled-opacity);
+}
+
+[data-color-field-segment] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-inline-size: var(--color-field-segment-min-width);
+	block-size: var(--color-field-segment-height);
+	padding-inline: var(--_color-field-segment-px);
+	border-radius: var(--color-field-segment-radius);
+	color: var(--color-field-segment-color);
+	font: inherit;
+	outline: none;
+	white-space: nowrap;
+	transition:
+		background var(--color-field-transition-duration) var(--color-field-transition-ease),
+		color var(--color-field-transition-duration) var(--color-field-transition-ease),
+		box-shadow var(--color-field-transition-duration) var(--color-field-transition-ease);
+}
+
+[data-color-field-segment][data-segment='literal'] {
+	min-inline-size: auto;
+	padding-inline: 0;
+	color: var(--color-field-literal-color);
+}
+
+[data-color-field-segment][data-placeholder] {
+	color: var(--color-field-placeholder-color);
+}
+
+[data-color-field-segment]:focus-visible {
+	background: var(--_color-field-accent-track);
+	color: var(--_color-field-accent-text);
+	box-shadow: var(--color-field-segment-focus-shadow);
+}
+
+[data-color-field-segment][data-invalid] {
+	color: var(--color-field-segment-invalid-color);
+}
+
+[data-color-field-segment][data-readonly] {
+	background: var(--color-field-segment-readonly-bg);
+	color: var(--color-field-segment-readonly-color);
+	text-decoration: var(--color-field-segment-readonly-decoration);
+	text-underline-offset: 2px;
+	cursor: default;
+}
+
+[data-color-field-segment][data-disabled] {
+	cursor: not-allowed;
+	opacity: var(--color-field-disabled-opacity);
+}
+
+[data-color-field-format-select] {
+	margin-inline-start: auto;
+	border: none;
+	border-radius: var(--color-field-format-select-radius);
+	padding-inline: var(--color-field-format-select-px);
+	background: var(--color-field-format-select-bg);
+	color: var(--color-field-format-select-color);
+	font: inherit;
+	font-size: var(--_color-field-font-size);
+	cursor: pointer;
+}
+
+[data-color-field-format-select]:focus-visible {
+	box-shadow: var(--color-field-segment-focus-shadow);
+}
+
+[data-color-field-format-select][data-disabled],
+[data-color-field-format-select][data-locked] {
+	cursor: not-allowed;
+	opacity: var(--color-field-disabled-opacity);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-color-field-input],
+	[data-color-field-segment] {
+		transition: none;
+	}
+}

src/uix/eidos/components/color-field/color-field.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { ActiveEidos } from '$uix/eidos';
+	import * as ColorField from '$soma/components/color-field';
+	import type { ColorFieldProps } from './types';
+
+	let {
+		size = 'md',
+		variant = 'surface',
+		color = 'primary',
+		value = $bindable(),
+		placeholder = $bindable(),
+		format = $bindable(),
+		children: bodyContent,
+		...rest
+	}: ColorFieldProps = $props();
+
+	const eidos = ActiveEidos.require();
+	const resolvedSize = $derived(eidos.resolve(size, 'md'));
+</script>
+
+<ColorField.Provider
+	{...rest}
+	bind:value
+	bind:placeholder
+	bind:format
+	data-size={resolvedSize}
+	data-variant={variant}
+	data-color={color}
+>
+	{@render bodyContent?.()}
+</ColorField.Provider>

src/uix/eidos/components/color-field/index.ts

@@ -0,0 +1,41 @@
+import ColorFieldComponent from './color-field.svelte'
+import Label from './color-field-label.svelte'
+import Input from './color-field-input.svelte'
+import Segment from './color-field-segment.svelte'
+import FormatSelect from './color-field-format-select.svelte'
+import HiddenInput from './color-field-hidden-input.svelte'
+
+type ColorFieldNamespace = typeof ColorFieldComponent & {
+	Label: typeof Label
+	Input: typeof Input
+	Segment: typeof Segment
+	FormatSelect: typeof FormatSelect
+	HiddenInput: typeof HiddenInput
+}
+
+const ColorField = ColorFieldComponent as ColorFieldNamespace
+ColorField.Label = Label
+ColorField.Input = Input
+ColorField.Segment = Segment
+ColorField.FormatSelect = FormatSelect
+ColorField.HiddenInput = HiddenInput
+
+export { ColorField }
+
+export default ColorField
+
+export type {
+	ColorFieldProps,
+	ColorFieldLabelProps as LabelProps,
+	ColorFieldInputProps as InputProps,
+	ColorFieldSegmentProps as SegmentProps,
+	ColorFieldFormatSelectProps as FormatSelectProps,
+	ColorFieldHiddenInputProps as HiddenInputProps,
+	InputSnippetProps,
+	ColorFieldSize,
+	ColorFieldVariant,
+	ColorFieldColor,
+	ColorValidator,
+	ColorOnInvalid,
+	ColorInvalidReason
+} from './types'

src/uix/eidos/components/color-field/types.ts

@@ -0,0 +1,35 @@
+import type {
+	FormatSelectProps,
+	HiddenInputProps,
+	InputProps,
+	InputSnippetProps as ColorFieldInputSnippetProps,
+	LabelProps,
+	ProviderProps,
+	SegmentProps,
+	ColorValidator,
+	ColorOnInvalid,
+	ColorInvalidReason
+} from '$soma/components/color-field'
+import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
+
+export type ColorFieldSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>
+export type ColorFieldVariant = ControlVariant
+export type ColorFieldColor = ColorRole
+
+export type ColorFieldProps = ProviderProps & {
+	/** Visual size for input height, segment padding and text. @default 'md' */
+	size?: ResponsiveProp<ColorFieldSize>
+	/** Visual treatment of the segmented input. @default 'surface' */
+	variant?: ColorFieldVariant
+	/** Intent palette for focus affordance. @default 'primary' */
+	color?: ColorFieldColor
+}
+
+export type ColorFieldLabelProps = LabelProps
+export type ColorFieldInputProps = InputProps
+export type ColorFieldSegmentProps = SegmentProps
+export type ColorFieldFormatSelectProps = FormatSelectProps
+export type ColorFieldHiddenInputProps = HiddenInputProps
+
+export type { ColorFieldInputSnippetProps, ColorFieldInputSnippetProps as InputSnippetProps }
+export type { ColorValidator, ColorOnInvalid, ColorInvalidReason }

src/uix/eidos/components/time-field/README.md

@@ -0,0 +1,80 @@
+# Eidos TimeField
+
+Segmented time input. Soma owns the editable hour/minute/second segments,
+ARIA spinbuttons, 12/24 hour cycle, day-period (AM/PM), timezone display
+and validation. Eidos adds size, variant, intent color and recipe
+styling on top.
+
+## Baseline
+
+Air no tenía un `TimeField` equivalente en la rama anterior. La
+referencia local real es Soma `time-field`, que ya implementa la edición
+segmentada (hour / minute / second / dayPeriod / timeZoneName), y la
+receta Eidos solo envuelve esa superficie con tamaños, variante visual
+y paleta de intents. Referencias externas: React Aria TimeField, Ark UI
+Time Picker, Bits UI Time Field.
+
+## Superficie
+
+```svelte
+<TimeField bind:value placeholder={new Time(9, 30, 0)} size="md" variant="surface" color="primary">
+	<TimeField.Label>Start</TimeField.Label>
+	<TimeField.Input name="start">
+		{#snippet children({ segments })}
+			{#each segments as { part, value } (part + value)}
+				<TimeField.Segment {part}>{value}</TimeField.Segment>
+			{/each}
+		{/snippet}
+	</TimeField.Input>
+</TimeField>
+```
+
+Partes públicas: `Label`, `Input`, `Segment`, `HiddenInput`.
+
+## Comparativa
+
+| Capacidad | Soma/Eidos | React Aria | Ark UI | Bits UI |
+| --- | --- | --- | --- | --- |
+| Input segmentado | Sí | Sí | Sí | Sí |
+| Hora/minuto/segundo | Sí | Sí | Sí | Sí |
+| 12h / 24h cycle | Sí | Sí | Sí | Sí |
+| AM/PM (dayPeriod) | Sí | Sí | Sí | Sí |
+| Zona horaria visible | Sí (ZonedDateTime) | Sí | Sí | Sí |
+| `granularity` (hour / minute / second) | Sí | Sí | Sí | Sí |
+| `minValue` / `maxValue` | Sí | Sí | Sí | Sí |
+| Validación custom | Sí | Sí | Sí | Sí |
+| Segmentos readonly | Sí | No | No | Sí |
+| Input hidden para forms | Sí | — | Sí | Sí |
+| Integración con Field | Sí | Vía Form/TextField | Vía Field | Manual |
+| Variante / tamaño / paleta visual | Sí, Eidos | CSS externo | CSS externo | CSS externo |
+
+## Decisiones
+
+- No se exporta `Provider` ni `Root` público. La forma Eidos es `<TimeField>`
+  con hijos attached.
+- Eidos no implementa popover ni clock dial. Eso pertenece a `TimePicker`,
+  no a `TimeField`.
+- `HiddenInput` se mantiene como parte pública por simetría con Soma; el
+  caso normal lo renderiza `TimeField.Input` cuando recibe `name`.
+- `size`, `variant` y `color` pertenecen a Eidos porque sólo afectan
+  receta visual; `value`, `placeholder`, `granularity`, `hourCycle`,
+  `hideTimeZone`, `locale`, `dir`, validación y navegación de segmentos
+  pertenecen a Soma.
+- El evento declarado por Morfo es `commit-set`; la edición continua de
+  segmentos no se modela como evento perceptivo por cada pulsación.
+
+## Gaps
+
+| Gap | Disposición | Detalle |
+| --- | --- | --- |
+| Tests browser-level del flujo completo (Playwright) | **implementar** | Cobertura visual + interacciones (Arrow/Backspace/dayPeriod toggle). Se hace en una pasada conjunta de tests. |
+| API extendida sobre las referencias externas | **diferir** | Sólo si llega un caso de uso real. Mantener la superficie estable. |
+| Documentación per-prop exhaustiva | **diferir** | Cubierto por la tabla de la demo (`API` tab). |
+
+## Referencias
+
+- Soma TimeField: `src/uix/soma/components/time-field/README.md`
+- React Aria TimeField: https://react-spectrum.adobe.com/react-aria/TimeField.html
+- Ark UI Time Picker: https://ark-ui.com/docs/components/time-picker
+- Bits UI Time Field: https://bits-ui.com/docs/components/time-field
+- WAI-ARIA APG Spinbutton: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/

src/uix/eidos/components/time-field/index.ts

@@ -0,0 +1,34 @@
+import TimeFieldComponent from './time-field.svelte'
+import Label from './time-field-label.svelte'
+import Input from './time-field-input.svelte'
+import Segment from './time-field-segment.svelte'
+import HiddenInput from './time-field-hidden-input.svelte'
+
+type TimeFieldNamespace = typeof TimeFieldComponent & {
+	Label: typeof Label
+	Input: typeof Input
+	Segment: typeof Segment
+	HiddenInput: typeof HiddenInput
+}
+
+const TimeField = TimeFieldComponent as TimeFieldNamespace
+TimeField.Label = Label
+TimeField.Input = Input
+TimeField.Segment = Segment
+TimeField.HiddenInput = HiddenInput
+
+export { TimeField }
+
+export default TimeField
+
+export type {
+	TimeFieldProps,
+	TimeFieldLabelProps as LabelProps,
+	TimeFieldInputProps as InputProps,
+	TimeFieldSegmentProps as SegmentProps,
+	TimeFieldHiddenInputProps as HiddenInputProps,
+	InputSnippetProps,
+	TimeFieldSize,
+	TimeFieldVariant,
+	TimeFieldColor
+} from './types'

src/uix/eidos/components/time-field/time-field-hidden-input.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import * as TimeField from '$soma/components/time-field';
+</script>
+
+<TimeField.HiddenInput />

src/uix/eidos/components/time-field/time-field-input.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	import * as TimeField from '$soma/components/time-field';
+	import type { TimeFieldInputProps, TimeFieldInputSnippetProps } from './types';
+
+	let { children: bodyContent, ...rest }: TimeFieldInputProps = $props();
+</script>
+
+<TimeField.Input {...rest}>
+	{#snippet children(args: TimeFieldInputSnippetProps)}
+		{@render bodyContent?.(args)}
+	{/snippet}
+</TimeField.Input>

src/uix/eidos/components/time-field/time-field-label.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as TimeField from '$soma/components/time-field';
+	import type { TimeFieldLabelProps } from './types';
+
+	let { children, ...rest }: TimeFieldLabelProps = $props();
+</script>
+
+<TimeField.Label {...rest}>
+	{@render children?.()}
+</TimeField.Label>

src/uix/eidos/components/time-field/time-field-segment.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+	import * as TimeField from '$soma/components/time-field';
+	import type { TimeFieldSegmentProps } from './types';
+
+	let { children, ...rest }: TimeFieldSegmentProps = $props();
+</script>
+
+<TimeField.Segment {...rest}>
+	{@render children?.()}
+</TimeField.Segment>

src/uix/eidos/components/time-field/time-field.css

@@ -0,0 +1,201 @@
+[data-time-field] {
+	--_time-field-height: var(--time-field-height-md);
+	--_time-field-px: var(--time-field-px-md);
+	--_time-field-gap: var(--time-field-gap-md);
+	--_time-field-segment-px: var(--time-field-segment-px-md);
+	--_time-field-font-size: var(--time-field-font-size-md);
+	--_time-field-accent-border: var(--color-primary-border);
+	--_time-field-accent-track: var(--color-primary-track);
+	--_time-field-accent-text: var(--color-primary-text);
+
+	display: inline-flex;
+	flex-direction: column;
+	gap: var(--time-field-stack-gap);
+	inline-size: 100%;
+	min-inline-size: 0;
+	color: var(--time-field-color);
+	font-family: var(--time-field-font-family);
+	font-size: var(--_time-field-font-size);
+	line-height: var(--time-field-line-height);
+}
+
+[data-time-field][data-size='xs'] {
+	--_time-field-height: var(--time-field-height-xs);
+	--_time-field-px: var(--time-field-px-xs);
+	--_time-field-gap: var(--time-field-gap-xs);
+	--_time-field-segment-px: var(--time-field-segment-px-xs);
+	--_time-field-font-size: var(--time-field-font-size-xs);
+}
+
+[data-time-field][data-size='sm'] {
+	--_time-field-height: var(--time-field-height-sm);
+	--_time-field-px: var(--time-field-px-sm);
+	--_time-field-gap: var(--time-field-gap-sm);
+	--_time-field-segment-px: var(--time-field-segment-px-sm);
+	--_time-field-font-size: var(--time-field-font-size-sm);
+}
+
+[data-time-field][data-size='lg'] {
+	--_time-field-height: var(--time-field-height-lg);
+	--_time-field-px: var(--time-field-px-lg);
+	--_time-field-gap: var(--time-field-gap-lg);
+	--_time-field-segment-px: var(--time-field-segment-px-lg);
+	--_time-field-font-size: var(--time-field-font-size-lg);
+}
+
+[data-time-field][data-size='xl'] {
+	--_time-field-height: var(--time-field-height-xl);
+	--_time-field-px: var(--time-field-px-xl);
+	--_time-field-gap: var(--time-field-gap-xl);
+	--_time-field-segment-px: var(--time-field-segment-px-xl);
+	--_time-field-font-size: var(--time-field-font-size-xl);
+}
+
+[data-time-field][data-color='secondary'] {
+	--_time-field-accent-border: var(--color-secondary-border);
+	--_time-field-accent-track: var(--color-secondary-track);
+	--_time-field-accent-text: var(--color-secondary-text);
+}
+
+[data-time-field][data-color='neutral'] {
+	--_time-field-accent-border: var(--color-neutral-border);
+	--_time-field-accent-track: var(--color-neutral-track);
+	--_time-field-accent-text: var(--color-neutral-text);
+}
+
+[data-time-field][data-color='affirm'] {
+	--_time-field-accent-border: var(--color-affirm-border);
+	--_time-field-accent-track: var(--color-affirm-track);
+	--_time-field-accent-text: var(--color-affirm-text);
+}
+
+[data-time-field][data-color='fulfill'] {
+	--_time-field-accent-border: var(--color-fulfill-border);
+	--_time-field-accent-track: var(--color-fulfill-track);
+	--_time-field-accent-text: var(--color-fulfill-text);
+}
+
+[data-time-field][data-color='risk'] {
+	--_time-field-accent-border: var(--color-risk-border);
+	--_time-field-accent-track: var(--color-risk-track);
+	--_time-field-accent-text: var(--color-risk-text);
+}
+
+[data-time-field][data-color='threat'] {
+	--_time-field-accent-border: var(--color-threat-border);
+	--_time-field-accent-track: var(--color-threat-track);
+	--_time-field-accent-text: var(--color-threat-text);
+}
+
+[data-time-field][data-color='loss'] {
+	--_time-field-accent-border: var(--color-loss-border);
+	--_time-field-accent-track: var(--color-loss-track);
+	--_time-field-accent-text: var(--color-loss-text);
+}
+
+[data-time-field-label] {
+	color: var(--time-field-label-color);
+	font: inherit;
+	font-weight: var(--time-field-label-font-weight);
+}
+
+[data-time-field-input] {
+	display: inline-flex;
+	align-items: center;
+	gap: var(--_time-field-gap);
+	min-inline-size: 0;
+	inline-size: 100%;
+	min-block-size: var(--_time-field-height);
+	padding-inline: var(--_time-field-px);
+	border: var(--time-field-border-width) solid var(--time-field-border);
+	border-radius: var(--time-field-radius);
+	background: var(--time-field-bg);
+	color: inherit;
+	transition:
+		background var(--time-field-transition-duration) var(--time-field-transition-ease),
+		border-color var(--time-field-transition-duration) var(--time-field-transition-ease),
+		box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease);
+}
+
+[data-time-field][data-variant='outline'] [data-time-field-input] {
+	background: transparent;
+}
+
+[data-time-field][data-variant='ghost'] [data-time-field-input] {
+	border-color: transparent;
+	background: transparent;
+	padding-inline: 0;
+}
+
+[data-time-field-input]:has([data-time-field-segment]:focus-visible) {
+	border-color: var(--_time-field-accent-border);
+	box-shadow: var(--time-field-focus-shadow);
+}
+
+[data-time-field][data-invalid] [data-time-field-input],
+[data-time-field-input][data-invalid] {
+	border-color: var(--time-field-border-invalid);
+}
+
+[data-time-field][data-disabled],
+[data-time-field-input][data-disabled] {
+	opacity: var(--time-field-disabled-opacity);
+}
+
+[data-time-field-segment] {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	min-inline-size: var(--time-field-segment-min-width);
+	block-size: var(--time-field-segment-height);
+	padding-inline: var(--_time-field-segment-px);
+	border-radius: var(--time-field-segment-radius);
+	color: var(--time-field-segment-color);
+	font: inherit;
+	outline: none;
+	white-space: nowrap;
+	transition:
+		background var(--time-field-transition-duration) var(--time-field-transition-ease),
+		color var(--time-field-transition-duration) var(--time-field-transition-ease),
+		box-shadow var(--time-field-transition-duration) var(--time-field-transition-ease);
+}
+
+[data-time-field-segment][data-segment='literal'] {
+	min-inline-size: auto;
+	padding-inline: 0;
+	color: var(--time-field-literal-color);
+}
+
+[data-time-field-segment][data-placeholder] {
+	color: var(--time-field-placeholder-color);
+}
+
+[data-time-field-segment]:focus-visible {
+	background: var(--_time-field-accent-track);
+	color: var(--_time-field-accent-text);
+	box-shadow: var(--time-field-segment-focus-shadow);
+}
+
+[data-time-field-segment][data-invalid] {
+	color: var(--time-field-segment-invalid-color);
+}
+
+[data-time-field-segment][data-readonly] {
+	background: var(--time-field-segment-readonly-bg);
+	color: var(--time-field-segment-readonly-color);
+	text-decoration: var(--time-field-segment-readonly-decoration);
+	text-underline-offset: 2px;
+	cursor: default;
+}
+
+[data-time-field-segment][data-disabled] {
+	cursor: not-allowed;
+	opacity: var(--time-field-disabled-opacity);
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-time-field-input],
+	[data-time-field-segment] {
+		transition: none;
+	}
+}

src/uix/eidos/components/time-field/time-field.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { ActiveEidos } from '$uix/eidos';
+	import * as TimeField from '$soma/components/time-field';
+	import type { TimeFieldProps } from './types';
+
+	let {
+		size = 'md',
+		variant = 'surface',
+		color = 'primary',
+		value = $bindable(),
+		placeholder = $bindable(),
+		children: bodyContent,
+		...rest
+	}: TimeFieldProps = $props();
+
+	const eidos = ActiveEidos.require();
+	const resolvedSize = $derived(eidos.resolve(size, 'md'));
+</script>
+
+<TimeField.Provider
+	{...rest}
+	bind:value
+	bind:placeholder
+	data-size={resolvedSize}
+	data-variant={variant}
+	data-color={color}
+>
+	{@render bodyContent?.()}
+</TimeField.Provider>

src/uix/eidos/components/time-field/types.ts

@@ -0,0 +1,28 @@
+import type {
+	InputProps,
+	InputSnippetProps as TimeFieldInputSnippetProps,
+	LabelProps,
+	ProviderProps,
+	SegmentProps
+} from '$soma/components/time-field'
+import type { ColorRole, ControlVariant, ResponsiveProp, Size } from '$uix/eidos/lib/types'
+
+export type TimeFieldSize = Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>
+export type TimeFieldVariant = ControlVariant
+export type TimeFieldColor = ColorRole
+
+export type TimeFieldProps = ProviderProps & {
+	/** Visual size for input height, segment padding and text. @default 'md' */
+	size?: ResponsiveProp<TimeFieldSize>
+	/** Visual treatment of the segmented input. @default 'surface' */
+	variant?: TimeFieldVariant
+	/** Intent palette for focus affordance. @default 'primary' */
+	color?: TimeFieldColor
+}
+
+export type TimeFieldLabelProps = LabelProps
+export type TimeFieldInputProps = InputProps
+export type TimeFieldSegmentProps = SegmentProps
+export type TimeFieldHiddenInputProps = Record<string, never>
+
+export type { TimeFieldInputSnippetProps, TimeFieldInputSnippetProps as InputSnippetProps }

src/uix/eidos/generated/base.css

@@ -868,6 +868,119 @@
 	--date-field-transition-duration: var(--duration-fast);
 	--date-field-transition-ease: var(--ease-default);
 	--date-field-disabled-opacity: 0.56;
+	--time-field-stack-gap: var(--space-1-5);
+	--time-field-height-xs: var(--control-height-xs);
+	--time-field-height-sm: var(--control-height-sm);
+	--time-field-height-md: var(--control-height-md);
+	--time-field-height-lg: var(--control-height-lg);
+	--time-field-height-xl: var(--control-height-xl);
+	--time-field-px-xs: var(--space-2);
+	--time-field-px-sm: var(--space-2-5);
+	--time-field-px-md: var(--space-3);
+	--time-field-px-lg: var(--space-3-5);
+	--time-field-px-xl: var(--space-4);
+	--time-field-gap-xs: var(--space-0-5);
+	--time-field-gap-sm: var(--space-0-5);
+	--time-field-gap-md: var(--space-1);
+	--time-field-gap-lg: var(--space-1-5);
+	--time-field-gap-xl: var(--space-2);
+	--time-field-segment-px-xs: var(--space-0-5);
+	--time-field-segment-px-sm: var(--space-0-5);
+	--time-field-segment-px-md: var(--space-1);
+	--time-field-segment-px-lg: var(--space-1-5);
+	--time-field-segment-px-xl: var(--space-2);
+	--time-field-font-family: var(--font-ui);
+	--time-field-font-size-xs: var(--font-size-xs);
+	--time-field-font-size-sm: var(--font-size-xs);
+	--time-field-font-size-md: var(--font-size-sm);
+	--time-field-font-size-lg: var(--font-size-sm);
+	--time-field-font-size-xl: var(--font-size-md);
+	--time-field-line-height: var(--leading-ui);
+	--time-field-radius: var(--radius-md);
+	--time-field-border-width: var(--border-width);
+	--time-field-border: var(--color-border-default);
+	--time-field-border-invalid: var(--color-risk-border);
+	--time-field-bg: var(--color-surface-default);
+	--time-field-color: var(--color-content-primary);
+	--time-field-label-color: var(--color-content-secondary);
+	--time-field-label-font-weight: var(--font-weight-medium);
+	--time-field-placeholder-color: var(--color-content-muted);
+	--time-field-literal-color: var(--color-content-muted);
+	--time-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+	--time-field-segment-min-width: 1.5ch;
+	--time-field-segment-height: calc(var(--_time-field-height) - var(--space-2));
+	--time-field-segment-radius: var(--radius-sm);
+	--time-field-segment-color: var(--color-content-primary);
+	--time-field-segment-invalid-color: var(--color-risk-text);
+	--time-field-segment-readonly-bg: var(--color-surface-overlay);
+	--time-field-segment-readonly-color: var(--color-content-secondary);
+	--time-field-segment-readonly-decoration: underline dotted var(--color-content-muted);
+	--time-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_time-field-accent-border);
+	--time-field-transition-duration: var(--duration-fast);
+	--time-field-transition-ease: var(--ease-default);
+	--time-field-disabled-opacity: 0.56;
+	--color-field-stack-gap: var(--space-1-5);
+	--color-field-height-xs: var(--control-height-xs);
+	--color-field-height-sm: var(--control-height-sm);
+	--color-field-height-md: var(--control-height-md);
+	--color-field-height-lg: var(--control-height-lg);
+	--color-field-height-xl: var(--control-height-xl);
+	--color-field-px-xs: var(--space-2);
+	--color-field-px-sm: var(--space-2-5);
+	--color-field-px-md: var(--space-3);
+	--color-field-px-lg: var(--space-3-5);
+	--color-field-px-xl: var(--space-4);
+	--color-field-gap-xs: var(--space-0-5);
+	--color-field-gap-sm: var(--space-0-5);
+	--color-field-gap-md: var(--space-1);
+	--color-field-gap-lg: var(--space-1-5);
+	--color-field-gap-xl: var(--space-2);
+	--color-field-segment-px-xs: var(--space-0-5);
+	--color-field-segment-px-sm: var(--space-0-5);
+	--color-field-segment-px-md: var(--space-1);
+	--color-field-segment-px-lg: var(--space-1-5);
+	--color-field-segment-px-xl: var(--space-2);
+	--color-field-font-family: var(--font-ui);
+	--color-field-font-size-xs: var(--font-size-xs);
+	--color-field-font-size-sm: var(--font-size-xs);
+	--color-field-font-size-md: var(--font-size-sm);
+	--color-field-font-size-lg: var(--font-size-sm);
+	--color-field-font-size-xl: var(--font-size-md);
+	--color-field-line-height: var(--leading-ui);
+	--color-field-radius: var(--radius-md);
+	--color-field-border-width: var(--border-width);
+	--color-field-border: var(--color-border-default);
+	--color-field-border-invalid: var(--color-risk-border);
+	--color-field-bg: var(--color-surface-default);
+	--color-field-color: var(--color-content-primary);
+	--color-field-label-color: var(--color-content-secondary);
+	--color-field-label-font-weight: var(--font-weight-medium);
+	--color-field-placeholder-color: var(--color-content-muted);
+	--color-field-literal-color: var(--color-content-muted);
+	--color-field-focus-shadow: 0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
+	--color-field-segment-min-width: 1.5ch;
+	--color-field-segment-height: calc(var(--_color-field-height) - var(--space-2));
+	--color-field-segment-radius: var(--radius-sm);
+	--color-field-segment-color: var(--color-content-primary);
+	--color-field-segment-invalid-color: var(--color-risk-text);
+	--color-field-segment-readonly-bg: var(--color-surface-overlay);
+	--color-field-segment-readonly-color: var(--color-content-secondary);
+	--color-field-segment-readonly-decoration: underline dotted var(--color-content-muted);
+	--color-field-segment-focus-shadow: inset 0 0 0 var(--border-width) var(--_color-field-accent-border);
+	--color-field-swatch-size-xs: calc(var(--control-height-xs) - var(--space-2));
+	--color-field-swatch-size-sm: calc(var(--control-height-sm) - var(--space-2));
+	--color-field-swatch-size-md: calc(var(--control-height-md) - var(--space-2));
+	--color-field-swatch-size-lg: calc(var(--control-height-lg) - var(--space-2));
+	--color-field-swatch-size-xl: calc(var(--control-height-xl) - var(--space-2));
+	--color-field-swatch-radius: var(--radius-sm);
+	--color-field-swatch-border: var(--color-border-subtle);
+	--color-field-format-select-color: var(--color-content-secondary);
+	--color-field-format-select-bg: transparent;
+	--color-field-format-select-radius: var(--radius-sm);
+	--color-field-format-select-px: var(--space-1);
+	--color-field-transition-duration: var(--duration-fast);
+	--color-field-transition-ease: var(--ease-default);
+	--color-field-disabled-opacity: 0.56;
 	--calendar-gap: var(--space-3);
 	--calendar-padding-sm: var(--space-3);
 	--calendar-padding-md: var(--space-4);

src/uix/eidos/index.css

@@ -89,6 +89,8 @@
 @import './components/date-field/date-field.css';
 @import './components/date-picker/date-picker.css';
 @import './components/date-range-picker/date-range-picker.css';
+@import './components/time-field/time-field.css';
+@import './components/color-field/color-field.css';
 @import './components/slider/slider.css';
 @import './components/toolbar/toolbar.css';
 @import './components/tag-group/tag-group.css';

src/uix/eidos/lib/recipes/base.ts

@@ -635,6 +635,125 @@ export const THEME_BASE_RECIPE_TOKENS = {
 		'transition-ease': 'var(--ease-default)',
 		'disabled-opacity': '0.56'
 	},
+	'time-field': {
+		'stack-gap': 'var(--space-1-5)',
+		'height-xs': 'var(--control-height-xs)',
+		'height-sm': 'var(--control-height-sm)',
+		'height-md': 'var(--control-height-md)',
+		'height-lg': 'var(--control-height-lg)',
+		'height-xl': 'var(--control-height-xl)',
+		'px-xs': 'var(--space-2)',
+		'px-sm': 'var(--space-2-5)',
+		'px-md': 'var(--space-3)',
+		'px-lg': 'var(--space-3-5)',
+		'px-xl': 'var(--space-4)',
+		'gap-xs': 'var(--space-0-5)',
+		'gap-sm': 'var(--space-0-5)',
+		'gap-md': 'var(--space-1)',
+		'gap-lg': 'var(--space-1-5)',
+		'gap-xl': 'var(--space-2)',
+		'segment-px-xs': 'var(--space-0-5)',
+		'segment-px-sm': 'var(--space-0-5)',
+		'segment-px-md': 'var(--space-1)',
+		'segment-px-lg': 'var(--space-1-5)',
+		'segment-px-xl': 'var(--space-2)',
+		'font-family': 'var(--font-ui)',
+		'font-size-xs': 'var(--font-size-xs)',
+		'font-size-sm': 'var(--font-size-xs)',
+		'font-size-md': 'var(--font-size-sm)',
+		'font-size-lg': 'var(--font-size-sm)',
+		'font-size-xl': 'var(--font-size-md)',
+		'line-height': 'var(--leading-ui)',
+		radius: 'var(--radius-md)',
+		'border-width': 'var(--border-width)',
+		border: 'var(--color-border-default)',
+		'border-invalid': 'var(--color-risk-border)',
+		bg: 'var(--color-surface-default)',
+		color: 'var(--color-content-primary)',
+		'label-color': 'var(--color-content-secondary)',
+		'label-font-weight': 'var(--font-weight-medium)',
+		'placeholder-color': 'var(--color-content-muted)',
+		'literal-color': 'var(--color-content-muted)',
+		'focus-shadow':
+			'0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)',
+		'segment-min-width': '1.5ch',
+		'segment-height': 'calc(var(--_time-field-height) - var(--space-2))',
+		'segment-radius': 'var(--radius-sm)',
+		'segment-color': 'var(--color-content-primary)',
+		'segment-invalid-color': 'var(--color-risk-text)',
+		'segment-readonly-bg': 'var(--color-surface-overlay)',
+		'segment-readonly-color': 'var(--color-content-secondary)',
+		'segment-readonly-decoration': 'underline dotted var(--color-content-muted)',
+		'segment-focus-shadow': 'inset 0 0 0 var(--border-width) var(--_time-field-accent-border)',
+		'transition-duration': 'var(--duration-fast)',
+		'transition-ease': 'var(--ease-default)',
+		'disabled-opacity': '0.56'
+	},
+	'color-field': {
+		'stack-gap': 'var(--space-1-5)',
+		'height-xs': 'var(--control-height-xs)',
+		'height-sm': 'var(--control-height-sm)',
+		'height-md': 'var(--control-height-md)',
+		'height-lg': 'var(--control-height-lg)',
+		'height-xl': 'var(--control-height-xl)',
+		'px-xs': 'var(--space-2)',
+		'px-sm': 'var(--space-2-5)',
+		'px-md': 'var(--space-3)',
+		'px-lg': 'var(--space-3-5)',
+		'px-xl': 'var(--space-4)',
+		'gap-xs': 'var(--space-0-5)',
+		'gap-sm': 'var(--space-0-5)',
+		'gap-md': 'var(--space-1)',
+		'gap-lg': 'var(--space-1-5)',
+		'gap-xl': 'var(--space-2)',
+		'segment-px-xs': 'var(--space-0-5)',
+		'segment-px-sm': 'var(--space-0-5)',
+		'segment-px-md': 'var(--space-1)',
+		'segment-px-lg': 'var(--space-1-5)',
+		'segment-px-xl': 'var(--space-2)',
+		'font-family': 'var(--font-ui)',
+		'font-size-xs': 'var(--font-size-xs)',
+		'font-size-sm': 'var(--font-size-xs)',
+		'font-size-md': 'var(--font-size-sm)',
+		'font-size-lg': 'var(--font-size-sm)',
+		'font-size-xl': 'var(--font-size-md)',
+		'line-height': 'var(--leading-ui)',
+		radius: 'var(--radius-md)',
+		'border-width': 'var(--border-width)',
+		border: 'var(--color-border-default)',
+		'border-invalid': 'var(--color-risk-border)',
+		bg: 'var(--color-surface-default)',
+		color: 'var(--color-content-primary)',
+		'label-color': 'var(--color-content-secondary)',
+		'label-font-weight': 'var(--font-weight-medium)',
+		'placeholder-color': 'var(--color-content-muted)',
+		'literal-color': 'var(--color-content-muted)',
+		'focus-shadow':
+			'0 0 0 var(--focus-ring-offset) var(--color-surface-default), 0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color)',
+		'segment-min-width': '1.5ch',
+		'segment-height': 'calc(var(--_color-field-height) - var(--space-2))',
+		'segment-radius': 'var(--radius-sm)',
+		'segment-color': 'var(--color-content-primary)',
+		'segment-invalid-color': 'var(--color-risk-text)',
+		'segment-readonly-bg': 'var(--color-surface-overlay)',
+		'segment-readonly-color': 'var(--color-content-secondary)',
+		'segment-readonly-decoration': 'underline dotted var(--color-content-muted)',
+		'segment-focus-shadow': 'inset 0 0 0 var(--border-width) var(--_color-field-accent-border)',
+		'swatch-size-xs': 'calc(var(--control-height-xs) - var(--space-2))',
+		'swatch-size-sm': 'calc(var(--control-height-sm) - var(--space-2))',
+		'swatch-size-md': 'calc(var(--control-height-md) - var(--space-2))',
+		'swatch-size-lg': 'calc(var(--control-height-lg) - var(--space-2))',
+		'swatch-size-xl': 'calc(var(--control-height-xl) - var(--space-2))',
+		'swatch-radius': 'var(--radius-sm)',
+		'swatch-border': 'var(--color-border-subtle)',
+		'format-select-color': 'var(--color-content-secondary)',
+		'format-select-bg': 'transparent',
+		'format-select-radius': 'var(--radius-sm)',
+		'format-select-px': 'var(--space-1)',
+		'transition-duration': 'var(--duration-fast)',
+		'transition-ease': 'var(--ease-default)',
+		'disabled-opacity': '0.56'
+	},
 	calendar: {
 		gap: 'var(--space-3)',
 		'padding-sm': 'var(--space-3)',

src/uix/morfo/components/color-field.ts

@@ -5,6 +5,7 @@ export const colorFieldMorfo = {
 	name: 'ColorField',
 	kebab: 'color-field',
 	scope: ['soma'],
+	apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/',
 	texts: {
 		label: '#?components.color-field.label|Color field',
 		input: '#?components.color-field.input|Color value',

src/uix/morfo/components/time-field.ts

@@ -5,6 +5,7 @@ export const timeFieldMorfo = {
 	name: 'TimeField',
 	kebab: 'time-field',
 	scope: ['soma'],
+	apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/',
 	texts: {
 		label: '#?components.time-field.label|Time field',
 		input: '#?components.time-field.input|Time field'

web/routes/uix/+layout@.svelte

@@ -147,6 +147,8 @@
 				{ slug: '/uix/components/date-field', label: 'Date field' },
 				{ slug: '/uix/components/date-picker', label: 'Date picker' },
 				{ slug: '/uix/components/date-range-picker', label: 'Date range picker' },
+				{ slug: '/uix/components/time-field', label: 'Time field' },
+				{ slug: '/uix/components/color-field', label: 'Color field' },
 				{ slug: '/uix/components/stepper', label: 'Stepper' },
 				{ slug: '/uix/components/tag-group', label: 'Tag group' },
 				{ slug: '/uix/components/tags-input', label: 'Tags input' },

web/routes/uix/components/color-field/+page.svelte

@@ -0,0 +1,626 @@
+<script lang="ts">
+	import {
+		ColorField,
+		type ColorFieldColor,
+		type ColorFieldSize,
+		type ColorFieldVariant,
+		type InputSnippetProps
+	} from '$uix/eidos/components/color-field';
+	import { compileMorfo } from '$uix/morfo';
+	import { colorFieldMorfo } from '@/uix/morfo/components/color-field';
+	import { getActiveUix } from '$active-uix';
+	import {
+		colorValueFromRgb,
+		type ColorValue,
+		type ColorFormat,
+		type EditableColorSegmentPart
+	} from '$libs/color';
+
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type TraceEntry = { event: string; family: string; intent?: string; at: number };
+	type Direction = 'ltr' | 'rtl';
+
+	const uix = getActiveUix();
+
+	const brandColor: ColorValue = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });
+	const accentColor: ColorValue = colorValueFromRgb({ r: 234, g: 88, b: 12, a: 0.85 });
+
+	let tab = $state<Tab>('live');
+	let trace = $state<TraceEntry[]>([]);
+	let stageRef = $state<HTMLElement | null>(null);
+	let value = $state<ColorValue | undefined>(brandColor);
+	let placeholder = $state<ColorValue>(brandColor);
+	let format = $state<ColorFormat>('hex');
+	let name = $state('brand');
+	let required = $state(true);
+	let disabled = $state(false);
+	let readonly = $state(false);
+	let lockAlpha = $state(false);
+	let enableAlpha = $state(true);
+	let allowedFormats = $state<ColorFormat[]>(['hex', 'rgb', 'hsl']);
+	let dir = $state<Direction>('ltr');
+	let size = $state<ColorFieldSize>('md');
+	let variant = $state<ColorFieldVariant>('surface');
+	let color = $state<ColorFieldColor>('primary');
+
+	const compiled = compileMorfo(colorFieldMorfo);
+	const partsList = $derived([...compiled.parts.byKebab.values()]);
+	const events = $derived([...compiled.actions.byName.values()]);
+	const readonlySegments = $derived<EditableColorSegmentPart[]>(lockAlpha ? ['alpha'] : []);
+	const valueLabel = $derived(value?.hex ?? 'empty');
+
+	function sameValue(a: ColorValue | undefined, b: ColorValue): boolean {
+		return a?.hex === b.hex;
+	}
+
+	function setDemoValue(kind: 'brand' | 'accent' | 'empty'): void {
+		if (kind === 'empty') {
+			value = undefined;
+			return;
+		}
+		value = kind === 'brand' ? brandColor : accentColor;
+	}
+
+	function toggleAllowedFormat(f: ColorFormat): void {
+		const set = new Set(allowedFormats);
+		if (set.has(f)) set.delete(f);
+		else set.add(f);
+		if (set.size === 0) set.add(f);
+		allowedFormats = ['hex', 'rgb', 'hsl'].filter((x) => set.has(x as ColorFormat)) as ColorFormat[];
+		if (!set.has(format)) format = allowedFormats[0];
+	}
+
+	function fmtTime(at: number): string {
+		return new Intl.DateTimeFormat(undefined, {
+			minute: '2-digit',
+			second: '2-digit',
+			fractionalSecondDigits: 2
+		}).format(at);
+	}
+
+	$effect(() => {
+		const el = stageRef;
+		if (!el) return;
+		const obs = new MutationObserver((mutations) => {
+			for (const m of mutations) {
+				if (m.attributeName !== 'data-event') continue;
+				const target = m.target as Element;
+				const ev = target.getAttribute('data-event');
+				if (!ev) continue;
+				trace = [
+					{
+						event: ev,
+						family: target.getAttribute('data-event-family') ?? '—',
+						intent: target.getAttribute('data-event-intent') ?? undefined,
+						at: Date.now()
+					},
+					...trace
+				].slice(0, 6);
+			}
+		});
+		obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
+		return () => obs.disconnect();
+	});
+
+	const somaSnippet = $derived(
+		[
+			"<script lang='ts'>",
+			"  import * as ColorField from '$soma/components/color-field';",
+			"  import { colorValueFromRgb, type ColorValue } from '$libs/color';",
+			'',
+			'  const placeholder = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });',
+			'  let value = $state<ColorValue | undefined>(placeholder);',
+			"  let format = $state<'hex' | 'rgb' | 'hsl'>('hex');",
+			'</' + 'script>',
+			'',
+			'<ColorField.Provider',
+			'  bind:value',
+			'  {placeholder}',
+			'  bind:format',
+			required && '  required',
+			disabled && '  disabled',
+			readonly && '  readonly',
+			!enableAlpha && '  enableAlpha={false}',
+			allowedFormats.length !== 3 &&
+				`  allowedFormats={${JSON.stringify(allowedFormats)}}`,
+			dir !== 'ltr' && `  dir="${dir}"`,
+			lockAlpha && "  readonlySegments={['alpha']}",
+			'>',
+			'  <ColorField.Label>Brand color</ColorField.Label>',
+			`  <ColorField.Input name="${name}" aria-label="Brand color">`,
+			'    {#snippet children({ segments })}',
+			'      {#each segments as { part, value }, index (`${part}-${index}`)}',
+			'        <ColorField.Segment {part}>{value}</ColorField.Segment>',
+			'      {/each}',
+			'      <ColorField.FormatSelect />',
+			'    {/snippet}',
+			'  </ColorField.Input>',
+			'</ColorField.Provider>'
+		]
+			.filter(Boolean)
+			.join('\n')
+	);
+
+	const eidosSnippet = $derived(
+		[
+			"<script lang='ts'>",
+			"  import { ColorField } from '$uix/eidos/components/color-field';",
+			"  import { colorValueFromRgb, type ColorValue } from '$libs/color';",
+			'',
+			'  const placeholder = colorValueFromRgb({ r: 30, g: 144, b: 255, a: 1 });',
+			'  let value = $state<ColorValue | undefined>(placeholder);',
+			"  let format = $state<'hex' | 'rgb' | 'hsl'>('hex');",
+			'</' + 'script>',
+			'',
+			'<ColorField',
+			'  bind:value',
+			'  {placeholder}',
+			'  bind:format',
+			size !== 'md' && `  size="${size}"`,
+			variant !== 'surface' && `  variant="${variant}"`,
+			color !== 'primary' && `  color="${color}"`,
+			required && '  required',
+			disabled && '  disabled',
+			readonly && '  readonly',
+			!enableAlpha && '  enableAlpha={false}',
+			allowedFormats.length !== 3 &&
+				`  allowedFormats={${JSON.stringify(allowedFormats)}}`,
+			dir !== 'ltr' && `  dir="${dir}"`,
+			lockAlpha && "  readonlySegments={['alpha']}",
+			'>',
+			'  <ColorField.Label>Brand color</ColorField.Label>',
+			`  <ColorField.Input name="${name}" aria-label="Brand color">`,
+			'    {#snippet children({ segments })}',
+			'      {#each segments as { part, value }, index (`${part}-${index}`)}',
+			'        <ColorField.Segment {part}>{value}</ColorField.Segment>',
+			'      {/each}',
+			'      <ColorField.FormatSelect />',
+			'    {/snippet}',
+			'  </ColorField.Input>',
+			'</ColorField>'
+		]
+			.filter(Boolean)
+			.join('\n')
+	);
+</script>
+
+<div data-uix-canvas-inner>
+	<header>
+		<div data-uix-eyebrow>Forms · ColorField</div>
+		<h1 data-uix-page-title>ColorField</h1>
+		<p data-uix-page-lede>
+			Segmented color input. Soma owns format switching (hex/rgb/hsl), channel editing, alpha,
+			ARIA spinbuttons and validation; Eidos adds size, variant, intent color and recipe styling.
+		</p>
+		<div data-uix-page-meta>
+			<span data-uix-meta-pill
+				><span data-uix-meta-key>parts</span>{compiled.parts.order.length}</span
+			>
+			<span data-uix-meta-pill><span data-uix-meta-key>events</span>{events.length}</span>
+			<span data-uix-meta-pill><span data-uix-meta-key>formats</span>3</span>
+			<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>5</span>
+		</div>
+	</header>
+
+	<div data-uix-stage>
+		<div data-uix-stage-area bind:this={stageRef}>
+			<div style="inline-size: min(32rem, 100%); display: grid; gap: var(--uix-space-3);">
+				<ColorField
+					bind:value
+					bind:placeholder
+					bind:format
+					{required}
+					{disabled}
+					{readonly}
+					{readonlySegments}
+					{enableAlpha}
+					{allowedFormats}
+					{dir}
+					{size}
+					{variant}
+					{color}
+				>
+					<ColorField.Label>Brand color</ColorField.Label>
+					<ColorField.Input {name} aria-label="Brand color">
+						{#snippet children({ segments }: InputSnippetProps)}
+							{#each segments as { part, value }, index (`${part}-${index}`)}
+								<ColorField.Segment {part}>{value}</ColorField.Segment>
+							{/each}
+							<ColorField.FormatSelect />
+						{/snippet}
+					</ColorField.Input>
+				</ColorField>
+				<div class="swatch-preview" aria-hidden="true">
+					<span
+						class="swatch"
+						style="background: {value?.hex ?? 'transparent'}; outline-color: var(--uix-line);"
+					></span>
+					<span class="swatch-meta">
+						<span><strong>hex</strong> {value?.hex ?? '—'}</span>
+						<span
+							><strong>rgb</strong> {value
+								? `rgb(${value.rgb.r}, ${value.rgb.g}, ${value.rgb.b}${value.rgb.a < 1 ? `, ${value.rgb.a}` : ''})`
+								: '—'}</span
+						>
+					</span>
+				</div>
+			</div>
+		</div>
+		<div data-uix-stage-trace>
+			<span data-uix-stage-trace-key>trace</span>
+			{#if trace.length === 0}
+				<span>edit or play an event to see sema stamps</span>
+			{:else}
+				{#each trace.slice(0, 3) as entry}
+					<span
+						><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
+							? ' · ' + entry.intent
+							: ''}</span
+					>
+					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
+				{/each}
+			{/if}
+			<span style="margin-inline-start: auto;">
+				<span data-uix-stage-trace-key>value</span>
+				{valueLabel}
+			</span>
+		</div>
+	</div>
+
+	<div data-uix-tabs role="tablist">
+		<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
+		<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>API</button>
+		<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
+			<span data-uix-layer-badge="morfo">morfo</span>
+			<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
+			<span data-uix-layer-badge="sema">sema</span>
+			<span data-uix-tab-count>{events.length}</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
+			>Recipe</button
+		>
+		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
+	</div>
+
+	{#if tab === 'live'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Controls</h2>
+			<p data-uix-section-desc>
+				<span data-uix-layer-badge="soma">soma</span> owns value, channel editing, format
+				switching and validation. <span data-uix-layer-badge="eidos">eidos</span> owns only the
+				visual treatment.
+			</p>
+
+			<div data-uix-subsection-head>
+				<span data-uix-layer-badge="soma">soma</span> props · segmented value
+			</div>
+			<div data-uix-controls>
+				<label data-uix-control>
+					<span data-uix-control-label>value</span>
+					<span data-uix-chips role="group">
+						<button
+							data-uix-chip
+							data-active={sameValue(value, brandColor)}
+							onclick={() => setDemoValue('brand')}>brand</button
+						>
+						<button
+							data-uix-chip
+							data-active={sameValue(value, accentColor)}
+							onclick={() => setDemoValue('accent')}>accent</button
+						>
+						<button
+							data-uix-chip
+							data-active={value === undefined}
+							onclick={() => setDemoValue('empty')}>empty</button
+						>
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>format</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['hex', 'rgb', 'hsl'] as v}
+							<button
+								data-uix-chip
+								data-active={format === v}
+								disabled={!allowedFormats.includes(v as ColorFormat)}
+								onclick={() => (format = v as ColorFormat)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>allowed formats</span>
+					<span data-uix-chips role="group">
+						{#each ['hex', 'rgb', 'hsl'] as v}
+							<button
+								data-uix-chip
+								data-active={allowedFormats.includes(v as ColorFormat)}
+								onclick={() => toggleAllowedFormat(v as ColorFormat)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>name</span>
+					<input type="text" bind:value={name} />
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>direction</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['ltr', 'rtl'] as v}
+							<button
+								data-uix-chip
+								data-active={dir === v}
+								onclick={() => (dir = v as Direction)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>states</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={required} />
+						<span data-uix-switch-label>required</span>
+					</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={disabled} />
+						<span data-uix-switch-label>disabled</span>
+					</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={readonly} />
+						<span data-uix-switch-label>readonly</span>
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>channels</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={enableAlpha} />
+						<span data-uix-switch-label>enable alpha</span>
+					</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={lockAlpha} disabled={!enableAlpha} />
+						<span data-uix-switch-label>alpha readonly</span>
+					</span>
+				</label>
+			</div>
+
+			<div data-uix-subsection-head>
+				<span data-uix-layer-badge="eidos">eidos</span> props · visual treatment
+			</div>
+			<div data-uix-controls>
+				<label data-uix-control>
+					<span data-uix-control-label>size</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['xs', 'sm', 'md', 'lg', 'xl'] as v}
+							<button
+								data-uix-chip
+								data-active={size === v}
+								onclick={() => (size = v as ColorFieldSize)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>variant</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['surface', 'outline', 'ghost'] as v}
+							<button
+								data-uix-chip
+								data-active={variant === v}
+								onclick={() => (variant = v as ColorFieldVariant)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>color</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as v}
+							<button
+								data-uix-chip
+								data-active={color === v}
+								onclick={() => (color = v as ColorFieldColor)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+			</div>
+
+			<div data-uix-code>
+				<div data-uix-code-head>
+					<span data-uix-layer-badge="soma">soma</span>
+					<span>headless · segment editing + ARIA</span>
+					<span data-uix-code-lang>svelte</span>
+				</div>
+				<pre><code>{somaSnippet}</code></pre>
+			</div>
+			<div data-uix-code style="margin-top: var(--uix-space-3);">
+				<div data-uix-code-head>
+					<span data-uix-layer-badge="eidos">eidos</span>
+					<span>visual · root + attached parts</span>
+					<span data-uix-code-lang>svelte</span>
+				</div>
+				<pre><code>{eidosSnippet}</code></pre>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'api'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>API + reference comparison</h2>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead>
+						<tr><th>Feature</th><th>Ark</th><th>Chakra</th><th>Bits</th><th>UIX</th><th>Decision</th></tr>
+					</thead>
+					<tbody>
+						<tr><td class="name">Segmented input</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Soma owns editable channel segments — unique to UIX.</td></tr>
+						<tr><td class="name">Format switch (hex/rgb/hsl)</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>FormatSelect is a public part.</td></tr>
+						<tr><td class="name">Alpha channel</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Opt-in via enableAlpha.</td></tr>
+						<tr><td class="name">Validation</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Custom validate + incomplete reason.</td></tr>
+						<tr><td class="name">Readonly segments</td><td>no</td><td>no</td><td>no</td><td>yes</td><td>Per-channel lock (e.g. alpha).</td></tr>
+						<tr><td class="name">Field integration</td><td>—</td><td>—</td><td>—</td><td>yes</td><td>Soma integrates with Field context.</td></tr>
+						<tr><td class="name">Visual variants</td><td>CSS</td><td>CSS</td><td>CSS</td><td>yes</td><td>Eidos adds canonical control variants.</td></tr>
+					</tbody>
+				</table>
+			</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
+					<tbody>
+						<tr><td class="name">value / placeholder</td><td>soma</td><td class="default">—</td><td>Bindable ColorValue (hex + rgb + hsl + hsv all in sync).</td></tr>
+						<tr><td class="name">format</td><td>soma</td><td class="default">hex</td><td>Bindable. Drives which segments render.</td></tr>
+						<tr><td class="name">allowedFormats</td><td>soma</td><td class="default">['hex','rgb','hsl']</td><td>Whitelist exposed by FormatSelect.</td></tr>
+						<tr><td class="name">enableAlpha</td><td>soma</td><td class="default">true</td><td>When false, hides the alpha segment entirely.</td></tr>
+						<tr><td class="name">readonlySegments</td><td>soma</td><td class="default">[]</td><td>Lock individual channels.</td></tr>
+						<tr><td class="name">validate</td><td>soma</td><td class="default">—</td><td>Returns error message string(s) when invalid.</td></tr>
+						<tr><td class="name">dir</td><td>soma</td><td class="default">services</td><td>Keyboard navigation direction.</td></tr>
+						<tr><td class="name">size / variant / color</td><td>eidos</td><td class="default">md / surface / primary</td><td>Visual-only data attrs.</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'morfo'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Morfo contract</h2>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Optional</th></tr></thead>
+					<tbody>
+						{#each partsList as part}
+							<tr>
+								<td class="name">{part.kebab}</td>
+								<td><code data-uix-part-marker>[{part.marker}]</code></td>
+								<td class="type">&lt;{part.defaultElement}&gt;</td>
+								<td class="type">{part.role ?? '—'}</td>
+								<td class="default">{part.optional ? 'yes' : 'no'}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'sema'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>
+				<span data-uix-layer-badge="sema">sema</span> · events + perceptual signature
+			</h2>
+			<p data-uix-section-desc>
+				ColorField only declares commit events. Channel editing remains headless until the value
+				is set.
+			</p>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Target</th><th>Play</th></tr></thead>
+					<tbody>
+						{#each events as action}
+							<tr>
+								<td class="name">{action.name}</td>
+								<td class="type">{action.semantic.family}</td>
+								<td>{action.semantic.verb ?? '—'}</td>
+								<td>{action.semantic.sequence ?? 'pre'}</td>
+								<td>{action.target}</td>
+								<td>
+									<button
+										data-uix-play
+										onclick={() => {
+											const target = stageRef?.querySelector(
+												'[data-color-field]'
+											) as HTMLElement | null;
+											if (!target) return;
+											void uix.events?.emit({
+												name: action.name,
+												family: action.semantic.family,
+												target
+											});
+										}}>▶ play</button
+									>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'recipe'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Eidos recipe</h2>
+			<p data-uix-section-desc>
+				Selectors live in <code>src/uix/eidos/components/color-field/color-field.css</code> and
+				consume Soma segment state plus Eidos <code>data-size</code>,
+				<code>data-variant</code> and <code>data-color</code>.
+			</p>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Selector</th><th>Owner</th><th>Purpose</th></tr></thead>
+					<tbody>
+						<tr><td class="name"><code>[data-color-field]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Root color-field contract and state.</td></tr>
+						<tr><td class="name"><code>[data-color-field][data-size][data-variant][data-color]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Visual scale, control treatment and intent palette.</td></tr>
+						<tr><td class="name"><code>[data-color-field-input][data-format]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Segment group container reflecting active format.</td></tr>
+						<tr><td class="name"><code>[data-color-field-segment][data-segment][data-readonly]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Per-channel segment state.</td></tr>
+						<tr><td class="name"><code>[data-color-field-format-select][data-locked]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Format switcher; locked when allowedFormats has 1 entry.</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'a11y'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Accessibility</h2>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
+					<tbody>
+						<tr><td class="name">Group</td><td>Input exposes <code>role="group"</code> and an accessible name.</td></tr>
+						<tr><td class="name">Channels</td><td>Editable channels expose <code>role="spinbutton"</code> with min/max/current value.</td></tr>
+						<tr><td class="name">Keyboard</td><td>Arrow keys, Home/End, Backspace and digits handled by Soma.</td></tr>
+						<tr><td class="name">Format select</td><td>Native <code>&lt;select&gt;</code> with localised option labels.</td></tr>
+						<tr><td class="name">Form</td><td>Hidden input submits the formatted color string when <code>name</code> is set.</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+</div>
+
+<style>
+	.swatch-preview {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--uix-space-3);
+		padding: var(--uix-space-2) var(--uix-space-3);
+		border: 1px solid var(--uix-line);
+		border-radius: var(--uix-radius-sm);
+		background: var(--uix-surface-sunken);
+	}
+	.swatch {
+		display: inline-block;
+		inline-size: 28px;
+		block-size: 28px;
+		border-radius: 6px;
+		outline: 1px solid var(--uix-line);
+		outline-offset: -1px;
+	}
+	.swatch-meta {
+		display: inline-flex;
+		flex-direction: column;
+		gap: 2px;
+		font-family: var(--uix-font-mono);
+		font-size: 11px;
+		color: var(--uix-text);
+	}
+	.swatch-meta strong {
+		color: var(--uix-text-faint);
+		font-weight: normal;
+		margin-inline-end: var(--uix-space-1);
+	}
+</style>

web/routes/uix/components/time-field/+page.svelte

@@ -0,0 +1,583 @@
+<script lang="ts">
+	import {
+		TimeField,
+		type TimeFieldColor,
+		type TimeFieldSize,
+		type TimeFieldVariant,
+		type InputSnippetProps
+	} from '$uix/eidos/components/time-field';
+	import { compileMorfo } from '$uix/morfo';
+	import { timeFieldMorfo } from '@/uix/morfo/components/time-field';
+	import { getActiveUix } from '$active-uix';
+	import {
+		Time,
+		ZonedDateTime,
+		type TimeValue,
+		type TimeGranularity,
+		type HourCycle,
+		type EditableTimeSegmentPart
+	} from '$libs/days';
+
+	type Tab = 'live' | 'api' | 'morfo' | 'sema' | 'recipe' | 'a11y';
+	type TraceEntry = { event: string; family: string; intent?: string; at: number };
+	type Direction = 'ltr' | 'rtl';
+
+	const uix = getActiveUix();
+
+	const startTime: TimeValue = new Time(9, 30, 0);
+	const endTime: TimeValue = new Time(17, 45, 30);
+
+	let tab = $state<Tab>('live');
+	let trace = $state<TraceEntry[]>([]);
+	let stageRef = $state<HTMLElement | null>(null);
+	let value = $state<TimeValue | undefined>(startTime);
+	let placeholder = $state<TimeValue>(startTime);
+	let name = $state('start');
+	let required = $state(true);
+	let disabled = $state(false);
+	let readonly = $state(false);
+	let bounds = $state(true);
+	let lockSeconds = $state(false);
+	let granularity = $state<TimeGranularity>('minute');
+	let hourCycle = $state<HourCycle>(24);
+	let hideTimeZone = $state(false);
+	let locale = $state('en-US');
+	let dir = $state<Direction>('ltr');
+	let size = $state<TimeFieldSize>('md');
+	let variant = $state<TimeFieldVariant>('surface');
+	let color = $state<TimeFieldColor>('primary');
+
+	const compiled = compileMorfo(timeFieldMorfo);
+	const partsList = $derived([...compiled.parts.byKebab.values()]);
+	const events = $derived([...compiled.actions.byName.values()]);
+	const readonlySegments = $derived<EditableTimeSegmentPart[]>(lockSeconds ? ['second'] : []);
+	const valueLabel = $derived(value?.toString() ?? 'empty');
+
+	const minValue: TimeValue = new Time(8, 0, 0);
+	const maxValue: TimeValue = new Time(20, 0, 0);
+
+	function sameValue(a: TimeValue | undefined, b: TimeValue): boolean {
+		return a?.toString() === b.toString();
+	}
+
+	function setDemoValue(kind: 'start' | 'end' | 'empty'): void {
+		if (kind === 'empty') {
+			value = undefined;
+			return;
+		}
+		value = kind === 'start' ? startTime : endTime;
+	}
+
+	function fmtTime(at: number): string {
+		return new Intl.DateTimeFormat(undefined, {
+			minute: '2-digit',
+			second: '2-digit',
+			fractionalSecondDigits: 2
+		}).format(at);
+	}
+
+	$effect(() => {
+		const el = stageRef;
+		if (!el) return;
+		const obs = new MutationObserver((mutations) => {
+			for (const m of mutations) {
+				if (m.attributeName !== 'data-event') continue;
+				const target = m.target as Element;
+				const ev = target.getAttribute('data-event');
+				if (!ev) continue;
+				trace = [
+					{
+						event: ev,
+						family: target.getAttribute('data-event-family') ?? '—',
+						intent: target.getAttribute('data-event-intent') ?? undefined,
+						at: Date.now()
+					},
+					...trace
+				].slice(0, 6);
+			}
+		});
+		obs.observe(el, { attributes: true, subtree: true, attributeFilter: ['data-event'] });
+		return () => obs.disconnect();
+	});
+
+	const somaSnippet = $derived(
+		[
+			"<script lang='ts'>",
+			"  import * as TimeField from '$soma/components/time-field';",
+			"  import { Time, type TimeValue } from '$libs/days';",
+			'',
+			'  const placeholder = new Time(9, 30, 0);',
+			'  let value = $state<TimeValue | undefined>(placeholder);',
+			'</' + 'script>',
+			'',
+			'<TimeField.Provider',
+			'  bind:value',
+			'  {placeholder}',
+			required && '  required',
+			disabled && '  disabled',
+			readonly && '  readonly',
+			bounds && '  minValue={new Time(8, 0, 0)}',
+			bounds && '  maxValue={new Time(20, 0, 0)}',
+			granularity !== 'minute' && `  granularity="${granularity}"`,
+			hourCycle !== 24 && `  hourCycle={${hourCycle}}`,
+			locale !== 'en-US' && `  locale="${locale}"`,
+			dir !== 'ltr' && `  dir="${dir}"`,
+			lockSeconds && "  readonlySegments={['second']}",
+			'>',
+			'  <TimeField.Label>Start</TimeField.Label>',
+			`  <TimeField.Input name="${name}" aria-label="Start time">`,
+			'    {#snippet children({ segments })}',
+			'      {#each segments as { part, value }, index (`${part}-${index}`)}',
+			'        <TimeField.Segment {part}>{value}</TimeField.Segment>',
+			'      {/each}',
+			'    {/snippet}',
+			'  </TimeField.Input>',
+			'</TimeField.Provider>'
+		]
+			.filter(Boolean)
+			.join('\n')
+	);
+
+	const eidosSnippet = $derived(
+		[
+			"<script lang='ts'>",
+			"  import { TimeField } from '$uix/eidos/components/time-field';",
+			"  import { Time, type TimeValue } from '$libs/days';",
+			'',
+			'  const placeholder = new Time(9, 30, 0);',
+			'  let value = $state<TimeValue | undefined>(placeholder);',
+			'</' + 'script>',
+			'',
+			'<TimeField',
+			'  bind:value',
+			'  {placeholder}',
+			size !== 'md' && `  size="${size}"`,
+			variant !== 'surface' && `  variant="${variant}"`,
+			color !== 'primary' && `  color="${color}"`,
+			required && '  required',
+			disabled && '  disabled',
+			readonly && '  readonly',
+			bounds && '  minValue={new Time(8, 0, 0)}',
+			bounds && '  maxValue={new Time(20, 0, 0)}',
+			granularity !== 'minute' && `  granularity="${granularity}"`,
+			hourCycle !== 24 && `  hourCycle={${hourCycle}}`,
+			locale !== 'en-US' && `  locale="${locale}"`,
+			dir !== 'ltr' && `  dir="${dir}"`,
+			lockSeconds && "  readonlySegments={['second']}",
+			'>',
+			'  <TimeField.Label>Start</TimeField.Label>',
+			`  <TimeField.Input name="${name}" aria-label="Start time">`,
+			'    {#snippet children({ segments })}',
+			'      {#each segments as { part, value }, index (`${part}-${index}`)}',
+			'        <TimeField.Segment {part}>{value}</TimeField.Segment>',
+			'      {/each}',
+			'    {/snippet}',
+			'  </TimeField.Input>',
+			'</TimeField>'
+		]
+			.filter(Boolean)
+			.join('\n')
+	);
+</script>
+
+<div data-uix-canvas-inner>
+	<header>
+		<div data-uix-eyebrow>Forms · TimeField</div>
+		<h1 data-uix-page-title>TimeField</h1>
+		<p data-uix-page-lede>
+			Segmented time input. Soma owns hour/minute/second editing, ARIA spinbuttons, validation
+			and form submission; Eidos adds size, variant, intent color and recipe styling.
+		</p>
+		<div data-uix-page-meta>
+			<span data-uix-meta-pill
+				><span data-uix-meta-key>parts</span>{compiled.parts.order.length}</span
+			>
+			<span data-uix-meta-pill><span data-uix-meta-key>events</span>{events.length}</span>
+			<span data-uix-meta-pill><span data-uix-meta-key>variants</span>3</span>
+			<span data-uix-meta-pill><span data-uix-meta-key>sizes</span>5</span>
+		</div>
+	</header>
+
+	<div data-uix-stage>
+		<div data-uix-stage-area bind:this={stageRef}>
+			<div style="inline-size: min(28rem, 100%);">
+				<TimeField
+					bind:value
+					bind:placeholder
+					{required}
+					{disabled}
+					{readonly}
+					{readonlySegments}
+					{granularity}
+					{locale}
+					{dir}
+					{hourCycle}
+					{hideTimeZone}
+					{size}
+					{variant}
+					{color}
+					minValue={bounds ? minValue : undefined}
+					maxValue={bounds ? maxValue : undefined}
+				>
+					<TimeField.Label>Start</TimeField.Label>
+					<TimeField.Input {name} aria-label="Start time">
+						{#snippet children({ segments }: InputSnippetProps)}
+							{#each segments as { part, value }, index (`${part}-${index}`)}
+								<TimeField.Segment {part}>{value}</TimeField.Segment>
+							{/each}
+						{/snippet}
+					</TimeField.Input>
+				</TimeField>
+			</div>
+		</div>
+		<div data-uix-stage-trace>
+			<span data-uix-stage-trace-key>trace</span>
+			{#if trace.length === 0}
+				<span>edit or play an event to see sema stamps</span>
+			{:else}
+				{#each trace.slice(0, 3) as entry}
+					<span
+						><span data-uix-stage-trace-event>{entry.event}</span> · {entry.family}{entry.intent
+							? ' · ' + entry.intent
+							: ''}</span
+					>
+					<span style="color: var(--uix-text-faint)">{fmtTime(entry.at)}</span>
+				{/each}
+			{/if}
+			<span style="margin-inline-start: auto;">
+				<span data-uix-stage-trace-key>value</span>
+				{valueLabel}
+			</span>
+		</div>
+	</div>
+
+	<div data-uix-tabs role="tablist">
+		<button data-uix-tab data-active={tab === 'live'} onclick={() => (tab = 'live')}>Live</button>
+		<button data-uix-tab data-active={tab === 'api'} onclick={() => (tab = 'api')}>API</button>
+		<button data-uix-tab data-active={tab === 'morfo'} onclick={() => (tab = 'morfo')}>
+			<span data-uix-layer-badge="morfo">morfo</span>
+			<span data-uix-tab-count>{partsList.length}p · {events.length}e</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'sema'} onclick={() => (tab = 'sema')}>
+			<span data-uix-layer-badge="sema">sema</span>
+			<span data-uix-tab-count>{events.length}</span>
+		</button>
+		<button data-uix-tab data-active={tab === 'recipe'} onclick={() => (tab = 'recipe')}
+			>Recipe</button
+		>
+		<button data-uix-tab data-active={tab === 'a11y'} onclick={() => (tab = 'a11y')}>A11y</button>
+	</div>
+
+	{#if tab === 'live'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Controls</h2>
+			<p data-uix-section-desc>
+				<span data-uix-layer-badge="soma">soma</span> owns value, segment behavior and
+				validation. <span data-uix-layer-badge="eidos">eidos</span> owns only the visual
+				treatment.
+			</p>
+
+			<div data-uix-subsection-head>
+				<span data-uix-layer-badge="soma">soma</span> props · segmented value
+			</div>
+			<div data-uix-controls>
+				<label data-uix-control>
+					<span data-uix-control-label>value</span>
+					<span data-uix-chips role="group">
+						<button
+							data-uix-chip
+							data-active={sameValue(value, startTime)}
+							onclick={() => setDemoValue('start')}>start</button
+						>
+						<button
+							data-uix-chip
+							data-active={sameValue(value, endTime)}
+							onclick={() => setDemoValue('end')}>end</button
+						>
+						<button
+							data-uix-chip
+							data-active={value === undefined}
+							onclick={() => setDemoValue('empty')}>empty</button
+						>
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>granularity</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['hour', 'minute', 'second'] as v}
+							<button
+								data-uix-chip
+								data-active={granularity === v}
+								onclick={() => (granularity = v as TimeGranularity)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>hour cycle</span>
+					<span data-uix-chips role="radiogroup">
+						{#each [12, 24] as v}
+							<button
+								data-uix-chip
+								data-active={hourCycle === v}
+								onclick={() => (hourCycle = v as HourCycle)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>name</span>
+					<input type="text" bind:value={name} />
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>locale</span>
+					<select bind:value={locale}>
+						<option value="en-US">en-US</option>
+						<option value="es-ES">es-ES</option>
+						<option value="fr-FR">fr-FR</option>
+					</select>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>direction</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['ltr', 'rtl'] as v}
+							<button
+								data-uix-chip
+								data-active={dir === v}
+								onclick={() => (dir = v as Direction)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>states</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={required} />
+						<span data-uix-switch-label>required</span>
+					</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={disabled} />
+						<span data-uix-switch-label>disabled</span>
+					</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={readonly} />
+						<span data-uix-switch-label>readonly</span>
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>constraints</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={bounds} />
+						<span data-uix-switch-label>min 08:00 · max 20:00</span>
+					</span>
+					<span data-uix-switch>
+						<input type="checkbox" bind:checked={lockSeconds} />
+						<span data-uix-switch-label>seconds readonly</span>
+					</span>
+				</label>
+			</div>
+
+			<div data-uix-subsection-head>
+				<span data-uix-layer-badge="eidos">eidos</span> props · visual treatment
+			</div>
+			<div data-uix-controls>
+				<label data-uix-control>
+					<span data-uix-control-label>size</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['xs', 'sm', 'md', 'lg', 'xl'] as v}
+							<button
+								data-uix-chip
+								data-active={size === v}
+								onclick={() => (size = v as TimeFieldSize)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>variant</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['surface', 'outline', 'ghost'] as v}
+							<button
+								data-uix-chip
+								data-active={variant === v}
+								onclick={() => (variant = v as TimeFieldVariant)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+				<label data-uix-control>
+					<span data-uix-control-label>color</span>
+					<span data-uix-chips role="radiogroup">
+						{#each ['primary', 'secondary', 'neutral', 'affirm', 'fulfill', 'risk', 'threat', 'loss'] as v}
+							<button
+								data-uix-chip
+								data-active={color === v}
+								onclick={() => (color = v as TimeFieldColor)}>{v}</button
+							>
+						{/each}
+					</span>
+				</label>
+			</div>
+
+			<div data-uix-code>
+				<div data-uix-code-head>
+					<span data-uix-layer-badge="soma">soma</span>
+					<span>headless · segment editing + ARIA</span>
+					<span data-uix-code-lang>svelte</span>
+				</div>
+				<pre><code>{somaSnippet}</code></pre>
+			</div>
+			<div data-uix-code style="margin-top: var(--uix-space-3);">
+				<div data-uix-code-head>
+					<span data-uix-layer-badge="eidos">eidos</span>
+					<span>visual · root + attached parts</span>
+					<span data-uix-code-lang>svelte</span>
+				</div>
+				<pre><code>{eidosSnippet}</code></pre>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'api'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>API + reference comparison</h2>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead>
+						<tr><th>Feature</th><th>React Aria</th><th>Ark</th><th>Bits</th><th>UIX</th><th>Decision</th></tr>
+					</thead>
+					<tbody>
+						<tr><td class="name">Segmented input</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Soma owns editable segments.</td></tr>
+						<tr><td class="name">Granularity (hour/min/sec)</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Drives which segments render.</td></tr>
+						<tr><td class="name">12 / 24 hour cycle</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>12h adds dayPeriod (AM/PM) segment.</td></tr>
+						<tr><td class="name">Validation</td><td>yes</td><td>yes</td><td>yes</td><td>yes</td><td>Custom validate + min/max.</td></tr>
+						<tr><td class="name">Readonly segments</td><td>no</td><td>no</td><td>yes</td><td>yes</td><td>Per-segment lock without disabling input.</td></tr>
+						<tr><td class="name">Field integration</td><td>form context</td><td>field</td><td>manual</td><td>yes</td><td>Soma integrates with Field context.</td></tr>
+						<tr><td class="name">Visual variants</td><td>CSS</td><td>CSS</td><td>CSS</td><td>yes</td><td>Eidos adds canonical control variants.</td></tr>
+					</tbody>
+				</table>
+			</div>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Prop</th><th>Owner</th><th>Default</th><th>Notes</th></tr></thead>
+					<tbody>
+						<tr><td class="name">value / placeholder</td><td>soma</td><td class="default">—</td><td>Bindable TimeValue.</td></tr>
+						<tr><td class="name">minValue / maxValue</td><td>soma</td><td class="default">—</td><td>Validation bounds.</td></tr>
+						<tr><td class="name">granularity</td><td>soma</td><td class="default">minute</td><td><code>hour</code> | <code>minute</code> | <code>second</code>.</td></tr>
+						<tr><td class="name">hourCycle</td><td>soma</td><td class="default">locale</td><td>12h adds dayPeriod segment; 24h hides it.</td></tr>
+						<tr><td class="name">hideTimeZone</td><td>soma</td><td class="default">false</td><td>Only affects ZonedDateTime values.</td></tr>
+						<tr><td class="name">readonlySegments</td><td>soma</td><td class="default">[]</td><td>Lock individual segments (e.g. seconds).</td></tr>
+						<tr><td class="name">locale / dir</td><td>soma</td><td class="default">services</td><td>Formatting + keyboard direction.</td></tr>
+						<tr><td class="name">size / variant / color</td><td>eidos</td><td class="default">md / surface / primary</td><td>Visual-only data attrs.</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'morfo'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Morfo contract</h2>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Part</th><th>Marker</th><th>Element</th><th>Role</th><th>Optional</th></tr></thead>
+					<tbody>
+						{#each partsList as part}
+							<tr>
+								<td class="name">{part.kebab}</td>
+								<td><code data-uix-part-marker>[{part.marker}]</code></td>
+								<td class="type">&lt;{part.defaultElement}&gt;</td>
+								<td class="type">{part.role ?? '—'}</td>
+								<td class="default">{part.optional ? 'yes' : 'no'}</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'sema'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>
+				<span data-uix-layer-badge="sema">sema</span> · events + perceptual signature
+			</h2>
+			<p data-uix-section-desc>
+				TimeField only declares commit events. Segment editing remains headless until the value is set.
+			</p>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Name</th><th>Family</th><th>Verb</th><th>Sequence</th><th>Target</th><th>Play</th></tr></thead>
+					<tbody>
+						{#each events as action}
+							<tr>
+								<td class="name">{action.name}</td>
+								<td class="type">{action.semantic.family}</td>
+								<td>{action.semantic.verb ?? '—'}</td>
+								<td>{action.semantic.sequence ?? 'pre'}</td>
+								<td>{action.target}</td>
+								<td>
+									<button
+										data-uix-play
+										onclick={() => {
+											const target = stageRef?.querySelector(
+												'[data-time-field]'
+											) as HTMLElement | null;
+											if (!target) return;
+											void uix.events?.emit({
+												name: action.name,
+												family: action.semantic.family,
+												target
+											});
+										}}>▶ play</button
+									>
+								</td>
+							</tr>
+						{/each}
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'recipe'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Eidos recipe</h2>
+			<p data-uix-section-desc>
+				Selectors live in <code>src/uix/eidos/components/time-field/time-field.css</code> and
+				consume Soma segment state plus Eidos <code>data-size</code>,
+				<code>data-variant</code> and <code>data-color</code>.
+			</p>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Selector</th><th>Owner</th><th>Purpose</th></tr></thead>
+					<tbody>
+						<tr><td class="name"><code>[data-time-field]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Root time-field contract and state.</td></tr>
+						<tr><td class="name"><code>[data-time-field][data-size][data-variant][data-color]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Visual scale, control treatment and intent palette.</td></tr>
+						<tr><td class="name"><code>[data-time-field-input]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Segment group container.</td></tr>
+						<tr><td class="name"><code>[data-time-field-segment][data-placeholder][data-readonly]</code></td><td><span data-uix-tag data-kind="morfo">morfo</span></td><td>Individual segment state.</td></tr>
+						<tr><td class="name"><code>[data-time-field][data-event]</code></td><td><span data-uix-tag data-kind="eidos">eidos</span></td><td>Transient perceptual event styling from Sema projection.</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+
+	{#if tab === 'a11y'}
+		<section data-uix-section>
+			<h2 data-uix-section-title>Accessibility</h2>
+			<div data-uix-table-wrap>
+				<table data-uix-table>
+					<thead><tr><th>Concern</th><th>Contract</th></tr></thead>
+					<tbody>
+						<tr><td class="name">Group</td><td>Input exposes <code>role="group"</code> and an accessible name.</td></tr>
+						<tr><td class="name">Segments</td><td>Editable segments expose <code>role="spinbutton"</code> with min/max/current value.</td></tr>
+						<tr><td class="name">Keyboard</td><td>Arrow keys, Home/End, Backspace, digits and A/P (for dayPeriod) handled by Soma.</td></tr>
+						<tr><td class="name">Announcer</td><td>Live region announces segment changes via <code>aria-valuetext</code>.</td></tr>
+						<tr><td class="name">Form</td><td>Hidden input submits the ISO time string when <code>name</code> is set.</td></tr>
+					</tbody>
+				</table>
+			</div>
+		</section>
+	{/if}
+</div>