@llui/components 0.0.1

package/dist/components/tags-input.d.ts

@@ -0,0 +1,118 @@
+import type { Send } from '@llui/dom';
+/**
+ * Tags input — text input that creates chips (tags) on commit keys
+ * (Enter, comma, blur). Backspace on empty input removes the last tag.
+ * Each tag is focusable via arrow keys.
+ */
+export interface TagsInputState {
+    value: string[];
+    inputValue: string;
+    disabled: boolean;
+    /** Maximum tag count. 0 = unlimited. */
+    max: number;
+    /** Only allow unique values. */
+    unique: boolean;
+    /** Currently-focused tag index, or null. */
+    focusedIndex: number | null;
+}
+export type TagsInputMsg = {
+    type: 'setInput';
+    value: string;
+} | {
+    type: 'addTag';
+    value?: string;
+} | {
+    type: 'removeTag';
+    index: number;
+} | {
+    type: 'removeLast';
+} | {
+    type: 'setValue';
+    value: string[];
+} | {
+    type: 'focusTag';
+    index: number | null;
+} | {
+    type: 'focusTagNext';
+} | {
+    type: 'focusTagPrev';
+} | {
+    type: 'clearAll';
+};
+export interface TagsInputInit {
+    value?: string[];
+    inputValue?: string;
+    disabled?: boolean;
+    max?: number;
+    unique?: boolean;
+}
+export declare function init(opts?: TagsInputInit): TagsInputState;
+export declare function update(state: TagsInputState, msg: TagsInputMsg): [TagsInputState, never[]];
+export interface TagItemParts<S> {
+    root: {
+        role: 'button';
+        tabIndex: (s: S) => number;
+        'data-scope': 'tags-input';
+        'data-part': 'tag';
+        'data-value': string;
+        'data-index': string;
+        'data-focused': (s: S) => '' | undefined;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+    };
+    remove: {
+        type: 'button';
+        'aria-label': string;
+        tabIndex: -1;
+        'data-scope': 'tags-input';
+        'data-part': 'tag-remove';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface TagsInputParts<S> {
+    root: {
+        role: 'group';
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-scope': 'tags-input';
+        'data-part': 'root';
+        'data-disabled': (s: S) => '' | undefined;
+    };
+    input: {
+        type: 'text';
+        autoComplete: 'off';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'tags-input';
+        'data-part': 'input';
+        onInput: (e: Event) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onBlur: (e: FocusEvent) => void;
+    };
+    tag: (value: string, index: number) => TagItemParts<S>;
+    clearTrigger: {
+        type: 'button';
+        'aria-label': string;
+        'data-scope': 'tags-input';
+        'data-part': 'clear-trigger';
+        onClick: (e: MouseEvent) => void;
+    };
+}
+export interface ConnectOptions {
+    inputLabel?: string;
+    removeLabel?: string;
+    clearLabel?: string;
+    /** Characters that commit the current input as a tag (default: [',']). */
+    delimiters?: string[];
+    /** Commit on blur (default: true). */
+    commitOnBlur?: boolean;
+    /** Validate a tag value before adding. Non-empty array blocks addTag. */
+    validate?: (value: string) => string[] | null;
+}
+export declare function connect<S>(get: (s: S) => TagsInputState, send: Send<TagsInputMsg>, opts?: ConnectOptions): TagsInputParts<S>;
+export declare const tagsInput: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=tags-input.d.ts.map

package/dist/components/tags-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tags-input.d.ts","sourceRoot":"","sources":["../../src/components/tags-input.ts"],"names":[],"mappings":"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"}

package/dist/components/tags-input.js

@@ -0,0 +1,168 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? [],
+        inputValue: opts.inputValue ?? '',
+        disabled: opts.disabled ?? false,
+        max: opts.max ?? 0,
+        unique: opts.unique ?? true,
+        focusedIndex: null,
+    };
+}
+export function update(state, msg) {
+    if (state.disabled && msg.type !== 'setValue')
+        return [state, []];
+    switch (msg.type) {
+        case 'setInput':
+            return [{ ...state, inputValue: msg.value }, []];
+        case 'addTag': {
+            const candidate = (msg.value ?? state.inputValue).trim();
+            if (candidate === '')
+                return [{ ...state, inputValue: '' }, []];
+            if (state.unique && state.value.includes(candidate))
+                return [{ ...state, inputValue: '' }, []];
+            if (state.max > 0 && state.value.length >= state.max)
+                return [{ ...state, inputValue: '' }, []];
+            return [{ ...state, value: [...state.value, candidate], inputValue: '' }, []];
+        }
+        case 'removeTag': {
+            const value = state.value.filter((_, i) => i !== msg.index);
+            return [{ ...state, value, focusedIndex: null }, []];
+        }
+        case 'removeLast':
+            if (state.value.length === 0)
+                return [state, []];
+            return [{ ...state, value: state.value.slice(0, -1) }, []];
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'focusTag':
+            return [{ ...state, focusedIndex: msg.index }, []];
+        case 'focusTagNext': {
+            const len = state.value.length;
+            if (len === 0)
+                return [state, []];
+            if (state.focusedIndex === null)
+                return [state, []];
+            const next = state.focusedIndex + 1;
+            return [{ ...state, focusedIndex: next >= len ? null : next }, []];
+        }
+        case 'focusTagPrev': {
+            const len = state.value.length;
+            if (len === 0)
+                return [state, []];
+            if (state.focusedIndex === null)
+                return [{ ...state, focusedIndex: len - 1 }, []];
+            return [{ ...state, focusedIndex: Math.max(0, state.focusedIndex - 1) }, []];
+        }
+        case 'clearAll':
+            return [{ ...state, value: [], focusedIndex: null }, []];
+    }
+}
+export function connect(get, send, opts = {}) {
+    const inputLabel = opts.inputLabel ?? 'Add tag';
+    const removeLabel = opts.removeLabel ?? 'Remove tag';
+    const clearLabel = opts.clearLabel ?? 'Clear all tags';
+    const delimiters = opts.delimiters ?? [','];
+    const commitOnBlur = opts.commitOnBlur !== false;
+    const validate = opts.validate;
+    let currentInput = '';
+    const tryAddTag = () => {
+        const candidate = currentInput.trim();
+        if (validate && candidate !== '') {
+            const errors = validate(candidate);
+            if (errors && errors.length > 0)
+                return;
+        }
+        send({ type: 'addTag' });
+    };
+    return {
+        root: {
+            role: 'group',
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'data-scope': 'tags-input',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        input: {
+            type: 'text',
+            autoComplete: 'off',
+            'aria-label': inputLabel,
+            disabled: (s) => get(s).disabled,
+            value: (s) => get(s).inputValue,
+            'data-scope': 'tags-input',
+            'data-part': 'input',
+            onInput: (e) => {
+                currentInput = e.target.value;
+                send({ type: 'setInput', value: currentInput });
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'Enter') {
+                    e.preventDefault();
+                    tryAddTag();
+                }
+                else if (delimiters.includes(e.key)) {
+                    e.preventDefault();
+                    tryAddTag();
+                }
+                else if (e.key === 'Backspace') {
+                    const target = e.target;
+                    if (target.value === '') {
+                        send({ type: 'removeLast' });
+                    }
+                }
+                else if (e.key === 'ArrowLeft') {
+                    const target = e.target;
+                    if (target.value === '') {
+                        e.preventDefault();
+                        send({ type: 'focusTagPrev' });
+                    }
+                }
+            },
+            onBlur: () => {
+                if (commitOnBlur)
+                    tryAddTag();
+            },
+        },
+        tag: (value, index) => ({
+            root: {
+                role: 'button',
+                tabIndex: (s) => (get(s).focusedIndex === index ? 0 : -1),
+                'data-scope': 'tags-input',
+                'data-part': 'tag',
+                'data-value': value,
+                'data-index': String(index),
+                'data-focused': (s) => (get(s).focusedIndex === index ? '' : undefined),
+                onFocus: () => send({ type: 'focusTag', index }),
+                onKeyDown: (e) => {
+                    if (e.key === 'ArrowLeft') {
+                        e.preventDefault();
+                        send({ type: 'focusTagPrev' });
+                    }
+                    else if (e.key === 'ArrowRight') {
+                        e.preventDefault();
+                        send({ type: 'focusTagNext' });
+                    }
+                    else if (e.key === 'Backspace' || e.key === 'Delete') {
+                        e.preventDefault();
+                        send({ type: 'removeTag', index });
+                    }
+                },
+            },
+            remove: {
+                type: 'button',
+                'aria-label': removeLabel,
+                tabIndex: -1,
+                'data-scope': 'tags-input',
+                'data-part': 'tag-remove',
+                onClick: () => send({ type: 'removeTag', index }),
+            },
+        }),
+        clearTrigger: {
+            type: 'button',
+            'aria-label': clearLabel,
+            'data-scope': 'tags-input',
+            'data-part': 'clear-trigger',
+            onClick: () => send({ type: 'clearAll' }),
+        },
+    };
+}
+export const tagsInput = { init, update, connect };

package/dist/components/time-picker.d.ts

@@ -0,0 +1,121 @@
+import type { Send } from '@llui/dom';
+/**
+ * Time picker — hours and minutes input with increment/decrement buttons.
+ * 12 or 24-hour format; optional seconds; step for minutes/seconds.
+ */
+export type TimeFormat = '12' | '24';
+export interface TimeValue {
+    hours: number;
+    minutes: number;
+    seconds: number;
+}
+export interface TimePickerState {
+    value: TimeValue;
+    format: TimeFormat;
+    minuteStep: number;
+    secondStep: number;
+    showSeconds: boolean;
+    disabled: boolean;
+}
+export type TimePickerMsg = {
+    type: 'setValue';
+    value: TimeValue;
+} | {
+    type: 'setHours';
+    hours: number;
+} | {
+    type: 'setMinutes';
+    minutes: number;
+} | {
+    type: 'setSeconds';
+    seconds: number;
+} | {
+    type: 'incrementHours';
+} | {
+    type: 'decrementHours';
+} | {
+    type: 'incrementMinutes';
+} | {
+    type: 'decrementMinutes';
+} | {
+    type: 'toggleAmPm';
+};
+export interface TimePickerInit {
+    value?: TimeValue;
+    format?: TimeFormat;
+    minuteStep?: number;
+    secondStep?: number;
+    showSeconds?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: TimePickerInit): TimePickerState;
+export declare function update(state: TimePickerState, msg: TimePickerMsg): [TimePickerState, never[]];
+/** Hours formatted for display (12-hr: 1..12, 24-hr: 0..23). */
+export declare function displayHours(state: TimePickerState): number;
+/** AM or PM for 12-hour format. */
+export declare function period(state: TimePickerState): 'AM' | 'PM';
+/** Format the full time string (HH:MM or HH:MM:SS). */
+export declare function formatTime(state: TimePickerState): string;
+export interface TimePickerParts<S> {
+    root: {
+        role: 'group';
+        'aria-label': string;
+        'data-scope': 'time-picker';
+        'data-part': 'root';
+        'data-format': (s: S) => TimeFormat;
+    };
+    hoursInput: {
+        type: 'number';
+        role: 'spinbutton';
+        'aria-label': string;
+        'aria-valuemin': (s: S) => number;
+        'aria-valuemax': (s: S) => number;
+        'aria-valuenow': (s: S) => number;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'time-picker';
+        'data-part': 'hours-input';
+        onInput: (e: Event) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    minutesInput: {
+        type: 'number';
+        role: 'spinbutton';
+        'aria-label': string;
+        'aria-valuemin': 0;
+        'aria-valuemax': 59;
+        'aria-valuenow': (s: S) => number;
+        disabled: (s: S) => boolean;
+        value: (s: S) => string;
+        'data-scope': 'time-picker';
+        'data-part': 'minutes-input';
+        onInput: (e: Event) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    periodTrigger: {
+        type: 'button';
+        'aria-label': string;
+        disabled: (s: S) => boolean;
+        'data-scope': 'time-picker';
+        'data-part': 'period-trigger';
+        'data-period': (s: S) => 'AM' | 'PM';
+        onClick: (e: MouseEvent) => void;
+        hidden: (s: S) => boolean;
+    };
+}
+export interface ConnectOptions {
+    label?: string;
+    hoursLabel?: string;
+    minutesLabel?: string;
+    periodLabel?: string;
+}
+export declare function connect<S>(get: (s: S) => TimePickerState, send: Send<TimePickerMsg>, opts?: ConnectOptions): TimePickerParts<S>;
+export declare const timePicker: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    displayHours: typeof displayHours;
+    period: typeof period;
+    formatTime: typeof formatTime;
+};
+//# sourceMappingURL=time-picker.d.ts.map

package/dist/components/time-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker.d.ts","sourceRoot":"","sources":["../../src/components/time-picker.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;GAGG;AAEH,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,CAAA;AAEpC,MAAM,WAAW,SAAS;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,EAAE,MAAM,CAAA;IACf,OAAO,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,SAAS,CAAA;IAChB,MAAM,EAAE,UAAU,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAAA;IAClB,WAAW,EAAE,OAAO,CAAA;IACpB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,aAAa,GACrB;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,SAAS,CAAA;CAAE,GACtC;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,GACnC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,GACvC;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,gBAAgB,CAAA;CAAE,GAC1B;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,kBAAkB,CAAA;CAAE,GAC5B;IAAE,IAAI,EAAE,YAAY,CAAA;CAAE,CAAA;AAE1B,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,SAAS,CAAA;IACjB,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,cAAmB,GAAG,eAAe,CAS/D;AAMD,wBAAgB,MAAM,CAAC,KAAK,EAAE,eAAe,EAAE,GAAG,EAAE,aAAa,GAAG,CAAC,eAAe,EAAE,KAAK,EAAE,CAAC,CAoC7F;AAED,gEAAgE;AAChE,wBAAgB,YAAY,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAI3D;AAED,mCAAmC;AACnC,wBAAgB,MAAM,CAAC,KAAK,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI,CAE1D;AAED,uDAAuD;AACvD,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,MAAM,CAMzD;AAED,MAAM,WAAW,eAAe,CAAC,CAAC;IAChC,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO,CAAA;QACb,YAAY,EAAE,MAAM,CAAA;QACpB,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,MAAM,CAAA;QACnB,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,UAAU,CAAA;KACpC,CAAA;IACD,UAAU,EAAE;QACV,IAAI,EAAE,QAAQ,CAAA;QACd,IAAI,EAAE,YAAY,CAAA;QAClB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACjC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACjC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACvB,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,aAAa,CAAA;QAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;QAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;KACtC,CAAA;IACD,YAAY,EAAE;QACZ,IAAI,EAAE,QAAQ,CAAA;QACd,IAAI,EAAE,YAAY,CAAA;QAClB,YAAY,EAAE,MAAM,CAAA;QACpB,eAAe,EAAE,CAAC,CAAA;QAClB,eAAe,EAAE,EAAE,CAAA;QACnB,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACjC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QACvB,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,eAAe,CAAA;QAC5B,OAAO,EAAE,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAA;QAC3B,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;KACtC,CAAA;IACD,aAAa,EAAE;QACb,IAAI,EAAE,QAAQ,CAAA;QACd,YAAY,EAAE,MAAM,CAAA;QACpB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,YAAY,EAAE,aAAa,CAAA;QAC3B,WAAW,EAAE,gBAAgB,CAAA;QAC7B,aAAa,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,GAAG,IAAI,CAAA;QACpC,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QAChC,MAAM,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;KAC1B,CAAA;CACF;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED,wBAAgB,OAAO,CAAC,CAAC,EACvB,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,eAAe,EAC9B,IAAI,EAAE,IAAI,CAAC,aAAa,CAAC,EACzB,IAAI,GAAE,cAAmB,GACxB,eAAe,CAAC,CAAC,CAAC,CAsEpB;AAED,eAAO,MAAM,UAAU;;;;;;;CAA8D,CAAA"}

package/dist/components/time-picker.js

@@ -0,0 +1,147 @@
+export function init(opts = {}) {
+    return {
+        value: opts.value ?? { hours: 0, minutes: 0, seconds: 0 },
+        format: opts.format ?? '24',
+        minuteStep: opts.minuteStep ?? 1,
+        secondStep: opts.secondStep ?? 1,
+        showSeconds: opts.showSeconds ?? false,
+        disabled: opts.disabled ?? false,
+    };
+}
+function mod(n, m) {
+    return ((n % m) + m) % m;
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'setValue':
+            return [{ ...state, value: msg.value }, []];
+        case 'setHours':
+            return [{ ...state, value: { ...state.value, hours: mod(msg.hours, 24) } }, []];
+        case 'setMinutes':
+            return [{ ...state, value: { ...state.value, minutes: mod(msg.minutes, 60) } }, []];
+        case 'setSeconds':
+            return [{ ...state, value: { ...state.value, seconds: mod(msg.seconds, 60) } }, []];
+        case 'incrementHours':
+            return [{ ...state, value: { ...state.value, hours: mod(state.value.hours + 1, 24) } }, []];
+        case 'decrementHours':
+            return [{ ...state, value: { ...state.value, hours: mod(state.value.hours - 1, 24) } }, []];
+        case 'incrementMinutes':
+            return [
+                {
+                    ...state,
+                    value: { ...state.value, minutes: mod(state.value.minutes + state.minuteStep, 60) },
+                },
+                [],
+            ];
+        case 'decrementMinutes':
+            return [
+                {
+                    ...state,
+                    value: { ...state.value, minutes: mod(state.value.minutes - state.minuteStep, 60) },
+                },
+                [],
+            ];
+        case 'toggleAmPm': {
+            const h = state.value.hours >= 12 ? state.value.hours - 12 : state.value.hours + 12;
+            return [{ ...state, value: { ...state.value, hours: h } }, []];
+        }
+    }
+}
+/** Hours formatted for display (12-hr: 1..12, 24-hr: 0..23). */
+export function displayHours(state) {
+    if (state.format === '24')
+        return state.value.hours;
+    const h = state.value.hours % 12;
+    return h === 0 ? 12 : h;
+}
+/** AM or PM for 12-hour format. */
+export function period(state) {
+    return state.value.hours >= 12 ? 'PM' : 'AM';
+}
+/** Format the full time string (HH:MM or HH:MM:SS). */
+export function formatTime(state) {
+    const pad = (n) => n.toString().padStart(2, '0');
+    const h = pad(state.value.hours);
+    const m = pad(state.value.minutes);
+    if (state.showSeconds)
+        return `${h}:${m}:${pad(state.value.seconds)}`;
+    return `${h}:${m}`;
+}
+export function connect(get, send, opts = {}) {
+    return {
+        root: {
+            role: 'group',
+            'aria-label': opts.label ?? 'Time',
+            'data-scope': 'time-picker',
+            'data-part': 'root',
+            'data-format': (s) => get(s).format,
+        },
+        hoursInput: {
+            type: 'number',
+            role: 'spinbutton',
+            'aria-label': opts.hoursLabel ?? 'Hours',
+            'aria-valuemin': (s) => (get(s).format === '12' ? 1 : 0),
+            'aria-valuemax': (s) => (get(s).format === '12' ? 12 : 23),
+            'aria-valuenow': (s) => displayHours(get(s)),
+            disabled: (s) => get(s).disabled,
+            value: (s) => String(displayHours(get(s))).padStart(2, '0'),
+            'data-scope': 'time-picker',
+            'data-part': 'hours-input',
+            onInput: (e) => {
+                const n = parseInt(e.target.value, 10);
+                if (!isNaN(n))
+                    send({ type: 'setHours', hours: n });
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    send({ type: 'incrementHours' });
+                }
+                else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    send({ type: 'decrementHours' });
+                }
+            },
+        },
+        minutesInput: {
+            type: 'number',
+            role: 'spinbutton',
+            'aria-label': opts.minutesLabel ?? 'Minutes',
+            'aria-valuemin': 0,
+            'aria-valuemax': 59,
+            'aria-valuenow': (s) => get(s).value.minutes,
+            disabled: (s) => get(s).disabled,
+            value: (s) => String(get(s).value.minutes).padStart(2, '0'),
+            'data-scope': 'time-picker',
+            'data-part': 'minutes-input',
+            onInput: (e) => {
+                const n = parseInt(e.target.value, 10);
+                if (!isNaN(n))
+                    send({ type: 'setMinutes', minutes: n });
+            },
+            onKeyDown: (e) => {
+                if (e.key === 'ArrowUp') {
+                    e.preventDefault();
+                    send({ type: 'incrementMinutes' });
+                }
+                else if (e.key === 'ArrowDown') {
+                    e.preventDefault();
+                    send({ type: 'decrementMinutes' });
+                }
+            },
+        },
+        periodTrigger: {
+            type: 'button',
+            'aria-label': opts.periodLabel ?? 'Toggle AM/PM',
+            disabled: (s) => get(s).disabled,
+            'data-scope': 'time-picker',
+            'data-part': 'period-trigger',
+            'data-period': (s) => period(get(s)),
+            onClick: () => send({ type: 'toggleAmPm' }),
+            hidden: (s) => get(s).format === '24',
+        },
+    };
+}
+export const timePicker = { init, update, connect, displayHours, period, formatTime };