svelte-kit-vice/src/uix/eidos/components/time-picker

Eidos TimePicker

Composite popover combining a segmented TimeField input + a slider-based Clock view (Hour / Minute / Second sliders + AM/PM toggle). Soma owns state coordination (single value + open + helpers commit / cancel / clear); Eidos adds visual treatment, the popover content shell and the canonical Footer parts.

Baseline

Air no tenía un TimePicker equivalente en la rama anterior. La referencia local real es la composición Soma time-picker + time-field

• popover + slider, que ya implementa la edición segmentada y la selección por sliders, y la receta Eidos sólo envuelve esa superficie con tamaños, variante visual y paleta de intents. Referencias externas: React Aria TimeField+Picker, Ark UI Time Picker, Chakra Time Picker.

Superficie

<TimePicker bind:value bind:open placeholder={defaultTime} mode="inline">
	<TimePicker.Input>
		{#snippet children({ segments })}
			{#each segments as { part, value }, i (`${part}-${i}`)}
				<TimePicker.Segment {part}>{value}</TimePicker.Segment>
			{/each}
			<TimePicker.Trigger />
		{/snippet}
	</TimePicker.Input>

	<TimePicker.Portal>
		<TimePicker.Content>
			<TimePicker.Clock>
				<TimePicker.HourSlider />
				<TimePicker.MinuteSlider />
				<TimePicker.SecondSlider />
				<TimePicker.DayPeriodToggle />

				<TimePicker.Footer>
					<TimePicker.Clear />
					<TimePicker.Cancel />
					<TimePicker.Close />
				</TimePicker.Footer>
			</TimePicker.Clock>
		</TimePicker.Content>
	</TimePicker.Portal>
</TimePicker>

Partes públicas: Trigger, Content, Clock, Label, Input, Segment, HiddenInput, HourSlider, MinuteSlider, SecondSlider, DayPeriodToggle, Footer, Clear, Cancel, Close, Anchor, Overlay, Arrow, Portal.

Comparativa

Capacidad	Soma/Eidos	React Aria	Ark UI	Chakra
Input segmentado	Sí	Sí	Sí	Sí
Popover Clock	Sí (sliders + AM/PM)	Sí (column-wheel)	Sí (columns)	Sí (columns)
Granularidad hour / minute / second	Sí	Sí	Sí	Sí
12h / 24h cycle	Sí	Sí	Sí	Sí
mode='inline' | 'modal'	Sí	No	No	No
Footer = composición pura	Sí	No	No	No
commit / cancel / clear helpers	Sí	Manual	Manual	Manual
Segmentos readonly	Sí	No	No	Sí
Validación custom	Sí	Sí	Sí	Sí
Variante / tamaño / paleta visual	Sí, Eidos	CSS externo	CSS externo	CSS externo

Decisiones

• Mode = inline | modal (P-2). modal pasa modal=true al PopoverProvider underlying → outside-click + Escape NO cierran; el consumer debe incluir <Close> o <Cancel> en el footer.
• Provider helpers (P-1). commit() cierra preservando valor; cancel() revierte al snapshot OPEN-edge y cierra; clear() deja value=undefined sin cerrar. Snapshot capturado vía watch(open) cuando open: false → true.
• Shell composition (P-3). Provider > Input + Trigger > Portal > Content > Clock > Sliders + DayPeriodToggle + Footer. Mismo esqueleto que date-picker.
• Footer = composición pura (N-7). Sin props clearButton/... en el root. Cada part Footer renderiza si se compone; omitir la part la oculta.
• Sliders en lugar de columnas-wheel. Son accesibles y nativos (rueda + drag + arrows + spinbutton ARIA). La UX wheel-scroll de Chakra/Ark es más vistosa pero requiere más código para la misma precisión. Pendiente walk visual para evaluar trade-off.
• HourCycle drives los sliders: 12h limita hour [1..12] + muestra DayPeriodToggle; 24h limita hour [0..23] sin toggle.

Gaps

Gap	Disposición	Detalle
Column-wheel scroll view (estilo iOS / Chakra)	diferir	Sliders cubren el caso. Wheel requiere intersección-observer + snap CSS. Hacer cuando aparezca demanda real.
Tests browser-level (Playwright)	implementar	Cobertura visual + interacciones (slider drag, AM/PM toggle, modal commit/cancel/clear). En la pasada conjunta de tests.
Sema sounds/haptic specific al picker	diferir	Reutiliza popover sema por ahora; añadir si emerge necesidad perceptiva específica.

Referencias

• Soma TimePicker: src/uix/soma/components/time-picker/README.md
• Soma TimeField: src/uix/soma/components/time-field/README.md
• React Aria TimeField+Picker: https://react-spectrum.adobe.com/react-aria/TimeField.html
• Ark UI Time Picker: https://ark-ui.com/docs/components/time-picker
• Chakra UI Time Picker: https://chakra-ui.com/docs/components/time-picker
• WAI-ARIA APG Dialog (modal): https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/