@human-kit/svelte-components 1.0.0-alpha.2 → 1.0.0-alpha.4

package/dist/timepicker/README.md

@@ -0,0 +1,97 @@
+# TimePicker
+
+## Description
+
+`TimePicker` composes a segmented time input with a popover containing wheel-based spinbutton columns.
+
+## Anatomy
+
+- `TimePicker.Root`
+- `TimePicker.Input`
+- `TimePicker.Segment`
+- `TimePicker.Trigger`
+- `TimePicker.Popover`
+- `TimePicker.Clock`
+- `TimePicker.WheelColumn`
+- `TimePicker.WheelItem`
+
+```svelte
+<TimePicker.Root>
+	<TimePicker.Input aria-label="Time input">
+		{#snippet children(segment)}
+			<TimePicker.Segment {segment} />
+		{/snippet}
+	</TimePicker.Input>
+	<TimePicker.Trigger />
+
+	<TimePicker.Popover>
+		<TimePicker.Clock />
+	</TimePicker.Popover>
+</TimePicker.Root>
+```
+
+```svelte
+<TimePicker.Popover>
+	<TimePicker.Clock class="flex gap-2">
+		{#snippet column(col)}
+			<TimePicker.WheelColumn type={col.type} class="h-44 rounded-md">
+				{#snippet children(option)}
+					<TimePicker.WheelItem type={col.type} {option} class="..." />
+				{/snippet}
+			</TimePicker.WheelColumn>
+		{/snippet}
+	</TimePicker.Clock>
+</TimePicker.Popover>
+```
+
+## Root API
+
+- `value?: string | null` (`HH:mm` or `HH:mm:ss`)
+- `defaultValue?: string | null` (`HH:mm` or `HH:mm:ss`)
+- `onChange?: (value: string | null) => void`
+- `minValue?: string`
+- `maxValue?: string`
+- `hourCycle?: 12 | 24`
+- `granularity?: 'hour' | 'minute' | 'second'`
+- `hourStep?: number`
+- `minuteStep?: number`
+- `secondStep?: number`
+- `isDisabled?: boolean`
+- `isReadOnly?: boolean`
+- `isRequired?: boolean`
+- `open?: boolean`
+- `defaultOpen?: boolean`
+- `onOpenChange?: (open: boolean, details: { reason, event?, cancel(), isCanceled }) => void`
+- Null-first empty contract: when `value` and `defaultValue` are omitted, the empty state is `null`.
+- `TimePicker.Input` exposes `aria-invalid` and `data-invalid` when the current segment draft is not committeable.
+
+## Popover API
+
+- `TimePicker.Popover` forwards `Popover.Content` props (for example `placement`, `offset`, `shouldFlip`, `boundaryElement`, `isNonModal`, and close behavior props).
+- The following are controlled internally by `TimePicker` and are not accepted on `TimePicker.Popover`: `open`, `triggerRef`, `onOpenChange`, `id`.
+- Defaults:
+  - `placement` defaults to `bottom`.
+  - `aria-label` defaults to `Time picker`.
+  - `initialFocus` defaults to the first wheel column (`role="spinbutton"`).
+
+## Wheel API
+
+- `TimePicker.WheelColumn` renders one wheel (`role="spinbutton"`) for one editable segment (`hour`, `minute`, `second`, or `dayPeriod`).
+- `TimePicker.WheelItem` is headless: it renders one item (`data-wheel-item`) with state attributes (`data-selected`, `data-disabled`, `data-centered`) and leaves all visual styling to consumers.
+
+## Clock API
+
+- `TimePicker.Clock` resolves visible wheel columns from root state (`granularity`, `hourCycle`) in stable order: `hour → minute? → second? → dayPeriod?`.
+- `class?: string` uses default layout (`flex gap-2`) when omitted.
+- `column?: Snippet<[ClockColumnInfo]>` allows custom per-column rendering.
+- `ClockColumnInfo` shape:
+  - `type: 'hour' | 'minute' | 'second' | 'dayPeriod'`
+  - `label?: string`
+
+## Notes
+
+- Locale is read from `LocaleProvider` when available.
+- Internally, values are normalized to 24-hour representation; 12-hour rendering only affects UI segments.
+- `granularity='hour'` emits `HH:00` values.
+- Min/max comparisons do not support midnight-wrapping ranges (`minValue > maxValue` is treated as out-of-range).
+- Wheel selection commits immediately on snap; popover close is controlled by standard popover interactions (escape, outside press, programmatic close).

package/dist/timepicker/TODO.md

@@ -0,0 +1,86 @@
+# TimePicker TODO
+
+## Goal
+
+Track TimePicker work with a single mandatory TODO format.
+
+## Backlog
+
+- [x] [M][P0][Area: Parsing][Owner: Unassigned][Target: TBD] Make time parsing strict so invalid strings like "1.5:30" or ":30" are rejected. _(Already implemented via `isValidTimePickerValue` regex. `parseTimePickerValue` now returns `null` for invalid input.)_
+- [x] [S][P0][Area: Validation][Owner: Unassigned][Target: TBD] Guard 12h draft conversion against invalid hour values outside 1-12. _(Already implemented in `buildTimePartsFromDraft`.)_
+- [x] [M][P0][Area: Input][Owner: Unassigned][Target: TBD] Apply step clamping on typed values when segment edit is confirmed. _(Already implemented in `setSegmentValue` via `clampToStep`.)_
+- [x] [S][P0][Area: Formatting][Owner: Unassigned][Target: TBD] Force "HH:00" output for hour granularity regardless of leftover minutes. _(Already implemented in `formatTimePickerValue`.)_
+- [x] [S][P0][Area: Validation][Owner: Unassigned][Target: TBD] Treat missing dayPeriod as invalid in 12h draft-to-24h conversion. _(Already implemented in `buildTimePartsFromDraft`.)_
+- [x] [M][P1][Area: Locale][Owner: Unassigned][Target: TBD] Build segment order and literals from Intl formatToParts instead of hardcoded templates. _(Already implemented in `buildTimePickerSegments`.)_
+- [x] [S][P1][Area: Validation][Owner: Unassigned][Target: TBD] Compare min/max using the active granularity to avoid false out-of-range states. _(Fixed: `isTimeOutOfRange` now accepts `granularity` and truncates before comparison.)_
+- [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: TBD] Ensure time picker columns and options expose complete listbox/option ARIA contract. _(Already implemented in column/column-cell components.)_
+- [x] [S][P1][Area: Composition][Owner: Unassigned][Target: TBD] Wire selection-close behavior so `shouldCloseOnSelect` controls whether column selection closes popover when draft is complete. _(Implemented in `selectColumnOption`; default is `false`.)_
+- [x] [S][P2][Area: Accessibility][Owner: Unassigned][Target: TBD] Verify dayPeriod segment uses 0-1 ARIA bounds and localized value text. _(Fixed: segment now uses `timePicker.hourCycle` for correct `aria-valuemin`/`aria-valuemax`.)_
+- [x] [S][P2][Area: Testing][Owner: Unassigned][Target: TBD] Ensure segment data attributes are consistent for styling and test selectors. _(Already implemented: `data-time-picker-segment="true"`.)_
+- [x] [M][P2][Area: Testing][Owner: Unassigned][Target: TBD] Expand unit coverage for parsing, format output, 12h conversion, clamping, and draft evaluation pipeline. _(Added 47 unit tests in `time-utils.test.ts`.)_
+- [x] [S][P2][Area: Documentation][Owner: Unassigned][Target: TBD] Add TimePicker references to focus contract documentation. _(Added component coverage section to `FOCUS_STATE_CONTRACT.md`.)_
+
+## Active
+
+### Bugs
+
+- [x] [M][P0][Area: State][Owner: Unassigned][Target: TBD] Permitir que el componente se limpie a undefined/null externamente. En `time-picker-root.svelte`, la observación de Svelte 5 ($effect sobre value) hace un early return con `if (value === undefined) return;`. Esto impide que se limpie la hora si el developer resetea el form manualmente enviando value = undefined. **Fix:** Quitar el early return por `undefined` y despachar la asignación nula para vaciar el TimePicker de forma controlada.
+
+- [x] [S][P0][Area: State][Owner: Unassigned][Target: TBD] Arreglar deshidratación al vaciar todos los segmentos (`commitFromDraft`). Al borrar backspace tras backspace, si el usuario vacía el _último_ segmento, la variable `hasAnyRequiredValue` rompe el flujo dando `false` lo que dispara un early return ocultando el borrado de `publishCommittedValue`. **Fix:** Quitar o condicionar el early return condicionado de hasAnyRequiredValue para que el componente notifique a los bindings de que la hora quedó completamente `null`.
+
+- [x] [M][P0][Area: Events][Owner: Unassigned][Target: TBD] Reparar Event Forwarding y omisiones en componentes internos. Actualmente los wrappers tragan eventos porque fallan en reingeniar el event payload natural de Svelte 5.
+  1. `Input`: Extrae variables pero no usa `composeEventHandlers`. Los onkey/onfocus externos mueren ahogados.
+  2. `Trigger`: Esparce `...restProps` **después** de sus eventos atados a Svelte 5, lo que cancela las rutinas internas si el usuario pasa `<Trigger onmousedown>`
+     **Fix:** Extraer las declaraciones conflictivas de `$props()` y usar `composeEventHandlers` en línea para todas en vez de pisarlas u omitirlas.
+
+- [x] [M][P0][Area: Input][Owner: Unassigned][Target: TBD] Guard segment `contenteditable` against paste, IME composition, and drag-drop. The `<span contenteditable>` in `time-picker-segment.svelte` has no `onbeforeinput`, `onpaste`, or `oncompositionend` handler. Ctrl+V, IME input, or drag-drop can modify the DOM directly without going through `typeSegmentDigit` / `setSegmentValue`, creating drift between the visible text and the internal `segmentDraft`. **Fix:** Add `onbeforeinput={(e) => e.preventDefault()}` to block all non-keyboard mutations. Alternatively, add an `oninput` handler that immediately restores the span's `textContent` to the current draft value as a safety net.
+
+- [x] [M][P0][Area: Wheel][Owner: Unassigned][Target: TBD] Increase scroll debounce timeout in `use-wheel-scroll.svelte.ts` from 64ms to ~120-150ms. On touch devices with momentum scrolling (especially iOS Safari), gaps between `scroll` events during deceleration can exceed 64ms, causing premature snap that interrupts the user's inertia. Since browsers that support `scrollend` use it as the primary settle signal and the debounce only acts as a safety net, a higher value does not affect perceived latency. **File:** `hooks/use-wheel-scroll.svelte.ts` line ~215.
+
+- [x] [M][P0][Area: Wheel][Owner: Unassigned][Target: TBD] Sync `lastCenteredIndex` when value changes externally while popover is open. `lastCenteredIndex` in `time-picker-wheel-column.svelte` is a plain `let` used as anchor for `moveBy()`. If the root value changes via `bind:value` while the popover is open, `lastCenteredIndex` still points to the old index. A subsequent `ArrowDown` jumps from the stale position instead of the current one. **Fix:** Add a `$effect` that observes `selectedValue` + `timePicker.open`: when both are truthy and `selectedIndex` changes, update `lastCenteredIndex = selectedIndex` and optionally scroll to it.
+
+- [x] [S][P1][Area: Wheel][Owner: Unassigned][Target: TBD] Suppress unnecessary re-snap chain after `scrollToIndex('smooth')` when value is already committed. When `handleCenterRequest` (click on WheelItem) eagerly commits the value then calls `scrollToIndex(i, 'smooth')`, the ensuing scroll events trigger debounce → `snapToCenter` → `animateSnapTo` for micro-alignment → more scroll events. The chain is usually idempotent but can cause micro-jitter. **Fix:** Add a `silent` parameter to `scrollToIndex` that suppresses `snapToCenter` for the duration of that smooth scroll. Use it only for clicks where the commit already happened, NOT for corrective disabled-skip (which must snap and commit).
+
+### Accesibilidad
+
+- [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: TBD] Add `aria-live` region to announce wheel value changes for screen readers. When the user scrolls a `WheelColumn`, `aria-valuenow` / `aria-valuetext` update, but screen readers don't automatically announce `aria-valuenow` changes on a `spinbutton`. **Fix:** Add a visually-hidden `<span role="status" aria-live="polite" class="sr-only">{valueText}</span>` inside each `WheelColumn` that updates when the selected value changes. This announces the new value after each snap.
+
+- [x] [S][P1][Area: Accessibility][Owner: Unassigned][Target: TBD] Fix `Home`/`End` in segment to use correct boundary values for 12h mode. In `time-picker-segment.svelte`, `Home` sends `setSegmentValue('hour', '0')` and `End` sends `'23'` regardless of `hourCycle`. In 12h mode the valid range is 1-12. This currently works by accident (clamping corrects it), but the intent is wrong and fragile. **Fix:** Use `timePicker.hourCycle` to determine boundaries: `Home` → `hourCycle === 12 ? '1' : '0'`, `End` → `hourCycle === 12 ? '12' : '23'`.
+
+- [x] [S][P2][Area: Accessibility][Owner: Unassigned][Target: TBD] Add `aria-roledescription` to `WheelColumn`. A generic `role="spinbutton"` doesn't communicate that the widget is a wheel/picker. Adding `aria-roledescription="wheel picker"` (or a localized equivalent) would improve the experience for screen reader users. Apply to the root `<div role="spinbutton">` in `time-picker-wheel-column.svelte`.
+
+- [x] [S][P2][Area: Accessibility][Owner: Unassigned][Target: TBD] Add `isRequired` prop to Root and propagate `aria-required` to the Input group. There's currently no way to indicate the field is required for form validation. The prop should flow from Root → context → `time-picker-input.svelte` as `aria-required` on the `role="group"` element.
+
+### Performance
+
+- [x] [M][P1][Area: Performance][Owner: Unassigned][Target: TBD] Cache `Intl.DateTimeFormat` instance across segment draft changes. `buildTimePickerSegments` in `time-utils.ts` creates a `new Intl.DateTimeFormat(locale, formatOptions)` on every call. This function is invoked from a `$derived` that depends on `segmentDraft`, so every keystroke recreates the formatter. The formatter only depends on `locale`, `hourCycle`, and `granularity`. **Fix:** In `time-picker-root.svelte`, derive the formatter once from those 3 variables and pass it to `buildTimePickerSegments` as a parameter.
+
+- [x] [S][P2][Area: Performance][Owner: Unassigned][Target: TBD] Short-circuit disabled computation in `getWheelOptions` when no min/max range is set. `getWheelOptions` runs `buildTimePartsFromDraft` + `isTimeOutOfRange` for every option in every column (~122 iterations for minute granularity). When `normalizedMinValue` and `normalizedMaxValue` are both `undefined`, all options are always enabled. **Fix:** Add an early check: `if (!normalizedMinValue && !normalizedMaxValue)` → skip disabled computation and return `disabled: false` for all.
+
+- [x] [S][P2][Area: Performance][Owner: Unassigned][Target: TBD] Cache system locale so `Intl.DateTimeFormat().resolvedOptions().locale` isn't called on every `$derived` reevaluation. In `time-picker-root.svelte`, `resolvedLocale` falls back to `Intl.DateTimeFormat().resolvedOptions().locale` when no context locale is provided. This creates a new formatter on each reevaluation. The system locale doesn't change during the component's lifetime. **Fix:** Capture it once with `untrack` at initialization and store in a constant.
+
+### Arquitectura / Robustez
+
+- [x] [S][P2][Area: Wheel][Owner: Unassigned][Target: TBD] Batch `ResizeObserver` callbacks with `requestAnimationFrame` to avoid layout thrashing. The `ResizeObserver` in `time-picker-wheel-column.svelte` calls `syncMeasurements()` which updates `$state` variables (`itemHeight`, `spacerHeight`). This triggers Svelte re-render → layout shift → observer fires again, producing `ResizeObserver loop completed with undelivered notifications` warnings in tests. **Fix:** Wrap the observer callback: `resizeObserver = new ResizeObserver(() => { requestAnimationFrame(() => syncMeasurements()); });`
+
+- [x] [S][P2][Area: Wheel][Owner: Unassigned][Target: TBD] Make `WheelItem` default visual style consistent with headless pattern. `time-picker-wheel-item.svelte` applies inline styles (opacity, cursor, font-weight, etc.) by default but drops ALL of them if the consumer passes `class`. This all-or-nothing behavior is inconsistent with the rest of the library (fully headless). **Fix:** Either remove default visual styles entirely (consumer styles via `data-selected`, `data-disabled` attributes — headless), or separate structural styles (always applied) from decorative styles (opt-out via prop). Preferred: go fully headless for consistency.
+
+- [x] [S][P3][Area: Code Quality][Owner: Unassigned][Target: TBD] Remove dead code in `isTimeOutOfRange`. The `if (minValue && maxValue) { ... if (min > max) return true }` block at the end is unreachable — if `min > max`, any value `v` is already rejected by the individual `v < min` or `v > max` checks above. Remove to reduce reader confusion. **File:** `root/time-utils.ts` lines ~219-228.
+
+- [x] [S][P3][Area: Code Quality][Owner: Unassigned][Target: TBD] Fix meaningless ternary in `setSegmentValue`. `const maxDigits = type === 'hour' ? 2 : 2;` — both branches are `2`. Was likely a draft for differentiating types. Replace with `const maxDigits = 2;`. **File:** `root/time-picker-root.svelte` line ~280.
+
+### Testing
+
+- [x] [C][P1][Area: Testing][Owner: Unassigned][Target: TBD] Expand `WheelColumn` test coverage. Current: 4 tests (render, aria values, cross-column nav, spacers). Missing critical scenarios: (a) ArrowUp/Down keyboard changes value, (b) disabled item skip on scroll, (c) PageUp/PageDown/Home/End navigation, (d) scroll-to-selected on popover open, (e) external value change syncs wheel position, (f) full focus contract (`data-focus-within`, `data-focus-visible`), (g) behavior with `minValue`/`maxValue` producing disabled options.
+
+- [x] [M][P1][Area: Testing][Owner: Unassigned][Target: TBD] Add integration test for wheel → root → segment sync. No test verifies the full flow: user scrolls wheel → snap detects centered item → `selectWheelValue` called → `commitFromDraft` runs → segment text updates → `bind:value` reflects new time. This is the core happy-path of the wheel and should be covered.
+
+- [x] [S][P2][Area: Testing][Owner: Unassigned][Target: TBD] Add test for contenteditable paste/IME resilience in segment. Verify that pasting text into a segment does not corrupt `segmentDraft` and that the visible text is restored to the draft value. Important because `contenteditable` is inherently fragile.
+
+## Notes
+
+TimePicker locale is sourced from LocaleProvider, not from a root locale prop.
+
+### Review context (2026-03-02)
+
+The wheel architecture (`WheelColumn` / `WheelItem` / `use-wheel-scroll`) replaced the original column-based `listbox`/`option` architecture. The wheel uses JS-driven snapping (no CSS `scroll-snap-type`) with a 120ms ease-out animation. Selection occurs when scroll settles and the centered item is committed. Disabled items are auto-skipped. `shouldCloseOnSelect` was removed — popover closes only via Escape, click outside, or programmatically.

package/dist/timepicker/clock/README.md

@@ -0,0 +1,14 @@
+# TimePicker Clock
+
+## API reference
+
+### TimePicker.Clock
+
+Name: `TimePicker.Clock`  
+Description: Clock panel composition part that resolves visible wheel columns from `TimePicker.Root` state.
+
+| Prop           | Type                             | Default                      | Description                                             |
+| -------------- | -------------------------------- | ---------------------------- | ------------------------------------------------------- |
+| `column`       | `Snippet<[ClockColumnInfo]>`     | `undefined`                  | Optional custom per-column renderer.                    |
+| `class`        | `string`                         | `'flex items-stretch gap-2'` | CSS class names for the clock container.                |
+| `...restProps` | `HTMLAttributes<HTMLDivElement>` | `-`                          | Additional attributes forwarded to the clock container. |

package/dist/timepicker/clock/time-picker-clock-test.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import TimePicker from '../index';
+
+	type Props = {
+		defaultValue?: string;
+		hourCycle?: 12 | 24;
+		granularity?: 'hour' | 'minute' | 'second';
+		isDisabled?: boolean;
+		clockClass?: string;
+		useSnippet?: boolean;
+	};
+
+	let {
+		defaultValue = '14:30',
+		hourCycle,
+		granularity = 'minute',
+		isDisabled = false,
+		clockClass = '',
+		useSnippet = false
+	}: Props = $props();
+
+	let value = $state<string | null>((() => defaultValue)());
+</script>
+
+<TimePicker.Root bind:value defaultOpen {hourCycle} {granularity} {isDisabled}>
+	<TimePicker.Input aria-label="Time input">
+		{#snippet children(segment)}
+			<TimePicker.Segment {segment} />
+		{/snippet}
+	</TimePicker.Input>
+
+	<TimePicker.Popover>
+		{#if useSnippet}
+			<TimePicker.Clock class={clockClass}>
+				{#snippet column(col)}
+					<div data-testid="custom-column" data-type={col.type}>{col.label}</div>
+				{/snippet}
+			</TimePicker.Clock>
+		{:else}
+			<TimePicker.Clock class={clockClass} />
+		{/if}
+	</TimePicker.Popover>
+</TimePicker.Root>
+
+<p data-testid="clock-test-value">{value}</p>

package/dist/timepicker/clock/time-picker-clock-test.svelte.d.ts

@@ -0,0 +1,11 @@
+type Props = {
+    defaultValue?: string;
+    hourCycle?: 12 | 24;
+    granularity?: 'hour' | 'minute' | 'second';
+    isDisabled?: boolean;
+    clockClass?: string;
+    useSnippet?: boolean;
+};
+declare const TimePickerClockTest: import("svelte").Component<Props, {}, "">;
+type TimePickerClockTest = ReturnType<typeof TimePickerClockTest>;
+export default TimePickerClockTest;

package/dist/timepicker/clock/time-picker-clock.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { setClockContext, type ClockContext } from '../../clock/root/context';
+	import {
+		resolveVisibleColumns,
+		type ClockColumnInfo
+	} from '../../clock/root/resolve-visible-columns';
+	import ClockWheelColumn from '../../clock/wheel-column/clock-wheel-column.svelte';
+	import { useTimePickerContext } from '../root/context';
+
+	type TimePickerClockProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+		column?: Snippet<[ClockColumnInfo]>;
+		class?: string;
+	};
+
+	let {
+		column: columnSnippet,
+		class: className = '',
+		...restProps
+	}: TimePickerClockProps = $props();
+
+	const timePicker = useTimePickerContext();
+
+	const context: ClockContext = {
+		get id() {
+			return timePicker.id;
+		},
+		get locale() {
+			return timePicker.locale;
+		},
+		get isDisabled() {
+			return timePicker.isDisabled;
+		},
+		get granularity() {
+			return timePicker.granularity;
+		},
+		get hourCycle() {
+			return timePicker.hourCycle;
+		},
+		get open() {
+			return timePicker.open;
+		},
+		selectWheelValue: timePicker.selectWheelValue,
+		getSelectedWheelValue: timePicker.getSelectedWheelValue,
+		getWheelOptions: timePicker.getWheelOptions,
+		getSegmentLabel: timePicker.getSegmentLabel
+	};
+
+	setClockContext(context);
+
+	const visibleColumns = $derived.by(() =>
+		resolveVisibleColumns(context.granularity, context.hourCycle, context.getSegmentLabel)
+	);
+</script>
+
+<div class={className || 'flex items-stretch gap-2'} data-clock="true" {...restProps}>
+	{#each visibleColumns as col (col.type)}
+		{#if columnSnippet}
+			{@render columnSnippet(col)}
+		{:else}
+			<ClockWheelColumn type={col.type} />
+		{/if}
+	{/each}
+</div>

package/dist/timepicker/clock/time-picker-clock.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type ClockColumnInfo } from '../../clock/root/resolve-visible-columns';
+type TimePickerClockProps = Omit<HTMLAttributes<HTMLDivElement>, 'class' | 'children'> & {
+    column?: Snippet<[ClockColumnInfo]>;
+    class?: string;
+};
+declare const TimePickerClock: import("svelte").Component<TimePickerClockProps, {}, "">;
+type TimePickerClock = ReturnType<typeof TimePickerClock>;
+export default TimePickerClock;

package/dist/timepicker/index.d.ts

@@ -0,0 +1,14 @@
+export * as TimePicker from './index.parts.ts';
+export { default as TimePickerRoot } from './root/time-picker-root.svelte';
+export { default as TimePickerInput } from './input/time-picker-input.svelte';
+export { default as TimePickerSegment } from './segment/time-picker-segment.svelte';
+export { default as TimePickerTrigger } from './trigger/time-picker-trigger.svelte';
+export { default as TimePickerPopover } from './popover/time-picker-popover.svelte';
+export { default as TimePickerClock } from './clock/time-picker-clock.svelte';
+export { default as TimePickerWheelColumn } from '../clock/wheel-column/clock-wheel-column.svelte';
+export { default as TimePickerWheelItem } from '../clock/wheel-item/clock-wheel-item.svelte';
+export { getTimePickerContext, setTimePickerContext, useTimePickerContext, type TimePickerContext, type TimePickerOpenChangeDetails, type TimePickerOpenChangeReason, type TimePickerSegmentPart, type TimePickerSegmentType, type TimePickerEditableSegmentType } from './root/context.ts';
+export { type TimePickerGranularity, type TimePickerHourCycle, type TimePickerTimeValue } from './root/time-utils';
+export { type ClockColumnInfo } from '../clock/root/resolve-visible-columns';
+import * as TimePickerParts from './index.parts.ts';
+export default TimePickerParts;

package/dist/timepicker/index.js

@@ -0,0 +1,14 @@
+export * as TimePicker from './index.parts.ts';
+export { default as TimePickerRoot } from './root/time-picker-root.svelte';
+export { default as TimePickerInput } from './input/time-picker-input.svelte';
+export { default as TimePickerSegment } from './segment/time-picker-segment.svelte';
+export { default as TimePickerTrigger } from './trigger/time-picker-trigger.svelte';
+export { default as TimePickerPopover } from './popover/time-picker-popover.svelte';
+export { default as TimePickerClock } from './clock/time-picker-clock.svelte';
+export { default as TimePickerWheelColumn } from '../clock/wheel-column/clock-wheel-column.svelte';
+export { default as TimePickerWheelItem } from '../clock/wheel-item/clock-wheel-item.svelte';
+export { getTimePickerContext, setTimePickerContext, useTimePickerContext } from './root/context.ts';
+export {} from './root/time-utils';
+export {} from '../clock/root/resolve-visible-columns';
+import * as TimePickerParts from './index.parts.ts';
+export default TimePickerParts;

package/dist/timepicker/index.parts.d.ts

@@ -0,0 +1,8 @@
+export { default as Root } from './root/time-picker-root.svelte';
+export { default as Input } from './input/time-picker-input.svelte';
+export { default as Segment } from './segment/time-picker-segment.svelte';
+export { default as Trigger } from './trigger/time-picker-trigger.svelte';
+export { default as Popover } from './popover/time-picker-popover.svelte';
+export { default as Clock } from './clock/time-picker-clock.svelte';
+export { default as WheelColumn } from '../clock/wheel-column/clock-wheel-column.svelte';
+export { default as WheelItem } from '../clock/wheel-item/clock-wheel-item.svelte';

package/dist/timepicker/index.parts.js

@@ -0,0 +1,8 @@
+export { default as Root } from './root/time-picker-root.svelte';
+export { default as Input } from './input/time-picker-input.svelte';
+export { default as Segment } from './segment/time-picker-segment.svelte';
+export { default as Trigger } from './trigger/time-picker-trigger.svelte';
+export { default as Popover } from './popover/time-picker-popover.svelte';
+export { default as Clock } from './clock/time-picker-clock.svelte';
+export { default as WheelColumn } from '../clock/wheel-column/clock-wheel-column.svelte';
+export { default as WheelItem } from '../clock/wheel-item/clock-wheel-item.svelte';

package/dist/timepicker/input/README.md

@@ -0,0 +1,15 @@
+# TimePicker Input
+
+## API reference
+
+### TimePicker.Input
+
+Name: `TimePicker.Input`  
+Description: Group wrapper for rendered time segments; manages focus entry and state attributes from `TimePicker.Root`.
+
+| Prop           | Type                               | Default     | Description                                           |
+| -------------- | ---------------------------------- | ----------- | ----------------------------------------------------- |
+| `children`     | `Snippet<[TimePickerSegmentPart]>` | `undefined` | Optional custom renderer for each segment part.       |
+| `class`        | `string`                           | `''`        | CSS class names for the group element.                |
+| `aria-label`   | `string`                           | `undefined` | Accessible label for the input group.                 |
+| `...restProps` | `HTMLAttributes<HTMLDivElement>`   | `-`         | Additional attributes forwarded to the group element. |

package/dist/timepicker/input/time-picker-input-forwarding-test.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	import TimePicker from '../index';
+
+	let downCount = $state(0);
+	let focusCount = $state(0);
+	let blurCount = $state(0);
+	let keyCount = $state(0);
+</script>
+
+<TimePicker.Root defaultValue="14:30">
+	<TimePicker.Input
+		aria-label="Forwarding input"
+		onmousedown={() => {
+			downCount += 1;
+		}}
+		onfocus={() => {
+			focusCount += 1;
+		}}
+		onblur={() => {
+			blurCount += 1;
+		}}
+		onkeydown={() => {
+			keyCount += 1;
+		}}
+	>
+		{#snippet children(segment)}
+			<TimePicker.Segment {segment} />
+		{/snippet}
+	</TimePicker.Input>
+	<TimePicker.Trigger>Open time picker</TimePicker.Trigger>
+	<TimePicker.Popover>
+		<TimePicker.Clock />
+	</TimePicker.Popover>
+</TimePicker.Root>
+
+<p data-testid="input-down-count">{downCount}</p>
+<p data-testid="input-focus-count">{focusCount}</p>
+<p data-testid="input-blur-count">{blurCount}</p>
+<p data-testid="input-key-count">{keyCount}</p>
+<button type="button" data-testid="outside-button">Outside</button>

package/dist/timepicker/input/time-picker-input-forwarding-test.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TimePickerInputForwardingTest: import("svelte").Component<Record<string, never>, {}, "">;
+type TimePickerInputForwardingTest = ReturnType<typeof TimePickerInputForwardingTest>;
+export default TimePickerInputForwardingTest;

package/dist/timepicker/input/time-picker-input.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useTimePickerContext, type TimePickerSegmentPart } from '../root/context';
+	import TimePickerSegment from '../segment/time-picker-segment.svelte';
+	import {
+		shouldShowFocusVisible,
+		trackInteractionModality
+	} from '../../primitives/input-modality';
+
+	import { composeEventHandlers } from '../internal/strict-props';
+
+	type TimePickerInputProps = Omit<
+		HTMLAttributes<HTMLDivElement>,
+		'children' | 'class' | 'id' | 'role' | 'tabindex'
+	> & {
+		children?: Snippet<[TimePickerSegmentPart]>;
+		class?: string;
+		'aria-label'?: string;
+	};
+
+	let {
+		children,
+		class: className = '',
+		'aria-label': ariaLabel,
+		onmousedown: onMouseDownExternal,
+		onfocus: onFocusExternal,
+		onblur: onBlurExternal,
+		onkeydown: onKeydownExternal,
+		...restProps
+	}: TimePickerInputProps = $props();
+
+	const timePicker = useTimePickerContext();
+	const segments = $derived(timePicker.getSegments());
+	const inputId = $derived(`${timePicker.id}-input`);
+
+	function handleMouseDown(event: MouseEvent) {
+		if (timePicker.isDisabled) return;
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		timePicker.setFocusVisible(false);
+
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('[data-time-picker-segment="true"]')) {
+			return;
+		}
+
+		event.preventDefault();
+		timePicker.focusNextPlaceholderOrLastSegment();
+	}
+
+	function handleFocus(event: FocusEvent) {
+		if (timePicker.isDisabled) return;
+		timePicker.syncFocusWithin();
+		timePicker.setFocusVisible(shouldShowFocusVisible(event.target as HTMLElement | null));
+		const target = event.target as HTMLElement | null;
+		if (target?.closest('[data-time-picker-segment="true"]')) {
+			return;
+		}
+		timePicker.focusNextPlaceholderOrLastSegment();
+	}
+
+	function handleBlur() {
+		queueMicrotask(() => {
+			timePicker.syncFocusWithin();
+		});
+	}
+
+	function handleKeydown(event: KeyboardEvent) {
+		if (timePicker.isDisabled) return;
+		if (event.key !== 'Enter' && event.key !== ' ') return;
+		trackInteractionModality(event, event.currentTarget as HTMLElement);
+		timePicker.setFocusVisible(true);
+		event.preventDefault();
+		timePicker.focusNextPlaceholderOrLastSegment();
+	}
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<!-- svelte-ignore a11y_role_supports_aria_props -->
+<div
+	id={inputId}
+	class={className}
+	{...restProps}
+	role="group"
+	aria-label={ariaLabel}
+	aria-invalid={timePicker.isInvalidDraft || undefined}
+	aria-required={timePicker.isRequired || undefined}
+	tabindex={timePicker.isDisabled ? -1 : 0}
+	data-disabled={timePicker.isDisabled || undefined}
+	data-readonly={timePicker.isReadOnly || undefined}
+	data-open={timePicker.open || undefined}
+	data-focus-visible={timePicker.focusVisible || undefined}
+	data-focus-within={timePicker.focusWithin || undefined}
+	data-invalid={timePicker.isInvalidDraft || undefined}
+	onmousedown={composeEventHandlers(handleMouseDown, onMouseDownExternal ?? undefined)}
+	onfocus={composeEventHandlers(handleFocus, onFocusExternal ?? undefined)}
+	onblur={composeEventHandlers(handleBlur, onBlurExternal ?? undefined)}
+	onkeydown={composeEventHandlers(handleKeydown, onKeydownExternal ?? undefined, {
+		skipExternalOnDefaultPrevented: true
+	})}
+>
+	{#each segments as segment, index (segment.type === 'literal' ? `literal-${index}` : segment.type)}
+		{#if children}
+			{@render children(segment)}
+		{:else}
+			<TimePickerSegment {segment} />
+		{/if}
+	{/each}
+</div>

package/dist/timepicker/input/time-picker-input.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type TimePickerSegmentPart } from '../root/context';
+type TimePickerInputProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'id' | 'role' | 'tabindex'> & {
+    children?: Snippet<[TimePickerSegmentPart]>;
+    class?: string;
+    'aria-label'?: string;
+};
+declare const TimePickerInput: import("svelte").Component<TimePickerInputProps, {}, "">;
+type TimePickerInput = ReturnType<typeof TimePickerInput>;
+export default TimePickerInput;

package/dist/timepicker/internal/strict-props.d.ts

@@ -0,0 +1,4 @@
+export declare function sanitizeTimePickerProps(componentName: string, props: Record<string, unknown>, forbiddenProps: string[]): Record<string, unknown>;
+export declare function composeEventHandlers<TEvent extends Event>(internalHandler: ((event: TEvent) => void) | undefined, externalHandler: ((event: TEvent) => void) | undefined, options?: {
+    skipExternalOnDefaultPrevented?: boolean;
+}): (event: TEvent) => void;

package/dist/timepicker/internal/strict-props.js

@@ -0,0 +1,51 @@
+const warnedMessages = new Set();
+const sanitizeCache = new WeakMap();
+function warnOnce(message) {
+    if (!import.meta.env.DEV)
+        return;
+    if (warnedMessages.has(message))
+        return;
+    warnedMessages.add(message);
+    console.warn(message);
+}
+export function sanitizeTimePickerProps(componentName, props, forbiddenProps) {
+    if (props === null || typeof props !== 'object')
+        return {};
+    const forbiddenKey = [...forbiddenProps].sort().join('|');
+    const cachedByProps = sanitizeCache.get(props);
+    const cached = cachedByProps?.get(forbiddenKey);
+    if (cached)
+        return cached;
+    const sanitized = {};
+    for (const [key, value] of Object.entries(props)) {
+        if (forbiddenProps.includes(key)) {
+            warnOnce(`[TimePicker.${componentName}]: Prop "${key}" is controlled by TimePicker.Root and has been ignored.`);
+            continue;
+        }
+        sanitized[key] = value;
+    }
+    let cacheBucket = cachedByProps;
+    if (!cacheBucket) {
+        cacheBucket = new Map();
+        sanitizeCache.set(props, cacheBucket);
+    }
+    cacheBucket.set(forbiddenKey, sanitized);
+    return sanitized;
+}
+export function composeEventHandlers(internalHandler, externalHandler, options) {
+    return (event) => {
+        let preventDefaultCalled = false;
+        const originalPreventDefault = event.preventDefault.bind(event);
+        event.preventDefault = () => {
+            preventDefaultCalled = true;
+            originalPreventDefault();
+        };
+        internalHandler?.(event);
+        event.preventDefault = originalPreventDefault;
+        if (options?.skipExternalOnDefaultPrevented &&
+            (event.defaultPrevented || preventDefaultCalled)) {
+            return;
+        }
+        externalHandler?.(event);
+    };
+}