@svgrid/grid 1.2.23 → 1.2.24

package/dist/createTabs.svelte.d.ts

@@ -0,0 +1,78 @@
+/**
+ * createTabs - the HEADLESS core behind <SvTabs>, in the same spirit as
+ * `createSvGrid` for the grid: a runes-based state machine (roving arrow-key
+ * focus, automatic/manual activation, full WAI-ARIA wiring) exposed as
+ * **prop-getters** you spread onto YOUR OWN markup. No styles, no DOM
+ * assumptions - render it however you like.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTabs } from '@svgrid/grid'
+ *   let value = $state('a')
+ *   const t = createTabs({ tabs: () => tabs, value: () => value, onChange: (id) => (value = id) })
+ * </script>
+ * <div {...t.tablistProps()}>
+ *   {#each tabs as tab}
+ *     <button {...t.tabProps(tab.id)}>{tab.label}</button>
+ *   {/each}
+ * </div>
+ * <div {...t.panelProps(t.activeId)}>...</div>
+ * ```
+ *
+ * The styled <SvTabs> is just one renderer over this core. DOM focus movement is
+ * a render concern, so the component watches `focusTick`/`focusId` and calls
+ * `.focus()` itself; the core only decides *which* tab should take focus.
+ */
+export type TabItem = {
+    id: string;
+    label: string;
+    disabled?: boolean;
+};
+export type TabsOrientation = 'horizontal' | 'vertical';
+export type TabsActivation = 'automatic' | 'manual';
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type TabsConfig = {
+    tabs: () => ReadonlyArray<TabItem>;
+    value: () => string | undefined;
+    onChange?: (id: string) => void;
+    orientation?: () => TabsOrientation;
+    activation?: () => TabsActivation;
+    ariaLabel?: () => string | undefined;
+};
+export declare function createTabs(config: TabsConfig): {
+    /** Currently selected tab id (falls back to the first enabled tab). */
+    readonly activeId: string;
+    /** Tab id that should hold DOM focus after the latest keyboard move. */
+    readonly focusId: string;
+    /** Monotonic counter; changes only on keyboard navigation. */
+    readonly focusTick: number;
+    isActive: (tid: string) => boolean;
+    select: (tid: string) => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    /** Spread onto the tablist container element. */
+    tablistProps: () => {
+        role: "tablist";
+        'aria-orientation': TabsOrientation;
+        'aria-label': string | undefined;
+    };
+    /** Spread onto the tab button for `tid`. */
+    tabProps: (tid: string) => {
+        role: "tab";
+        id: string;
+        'data-tab': string;
+        'aria-selected': boolean;
+        'aria-controls': string;
+        tabindex: number;
+        disabled: boolean | undefined;
+        onclick: () => void;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** Spread onto the tabpanel element for `tid` (usually the active id). */
+    panelProps: (tid: string) => {
+        role: "tabpanel";
+        id: string;
+        'aria-labelledby': string;
+        tabindex: number;
+    };
+};
+export type Tabs = ReturnType<typeof createTabs>;

package/dist/createTabs.svelte.js

@@ -0,0 +1,92 @@
+let uid = 0;
+export function createTabs(config) {
+    const id = `sv-tabs-${uid++}`;
+    const tabs = () => config.tabs();
+    const orientation = () => config.orientation?.() ?? 'horizontal';
+    const activation = () => config.activation?.() ?? 'automatic';
+    const enabled = $derived(tabs().filter((t) => !t.disabled));
+    const active = $derived(config.value() ?? tabs().find((t) => !t.disabled)?.id ?? tabs()[0]?.id ?? '');
+    // Roving focus target. `focusTick` bumps on every keyboard move so the styled
+    // renderer can move real DOM focus without stealing it on mount.
+    let focusId = $state('');
+    let focusTick = $state(0);
+    const requestFocus = (tid) => { focusId = tid; focusTick++; };
+    const tabId = (tid) => `${id}-tab-${tid}`;
+    const panelId = (tid) => `${id}-panel-${tid}`;
+    function select(tid) {
+        const t = tabs().find((x) => x.id === tid);
+        if (!t || t.disabled)
+            return;
+        config.onChange?.(tid);
+    }
+    function onKeydown(e) {
+        const list = enabled;
+        if (!list.length)
+            return;
+        const idx = list.findIndex((t) => t.id === active);
+        const fwd = orientation() === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+        const back = orientation() === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+        let next = null;
+        if (e.key === fwd)
+            next = list[(idx + 1) % list.length]?.id ?? null;
+        else if (e.key === back)
+            next = list[(idx - 1 + list.length) % list.length]?.id ?? null;
+        else if (e.key === 'Home')
+            next = list[0]?.id ?? null;
+        else if (e.key === 'End')
+            next = list.at(-1)?.id ?? null;
+        else if ((e.key === 'Enter' || e.key === ' ') && activation() === 'manual') {
+            e.preventDefault();
+            select(active);
+            return;
+        }
+        else
+            return;
+        if (next) {
+            e.preventDefault();
+            requestFocus(next);
+            if (activation() === 'automatic')
+                select(next);
+        }
+    }
+    return {
+        /** Currently selected tab id (falls back to the first enabled tab). */
+        get activeId() { return active; },
+        /** Tab id that should hold DOM focus after the latest keyboard move. */
+        get focusId() { return focusId; },
+        /** Monotonic counter; changes only on keyboard navigation. */
+        get focusTick() { return focusTick; },
+        isActive: (tid) => tid === active,
+        select,
+        onKeydown,
+        /** Spread onto the tablist container element. */
+        tablistProps: () => ({
+            role: 'tablist',
+            'aria-orientation': orientation(),
+            'aria-label': config.ariaLabel?.(),
+        }),
+        /** Spread onto the tab button for `tid`. */
+        tabProps: (tid) => {
+            const t = tabs().find((x) => x.id === tid);
+            const isActive = tid === active;
+            return {
+                role: 'tab',
+                id: tabId(tid),
+                'data-tab': tid,
+                'aria-selected': isActive,
+                'aria-controls': panelId(tid),
+                tabindex: isActive ? 0 : -1,
+                disabled: t?.disabled,
+                onclick: () => select(tid),
+                onkeydown: onKeydown,
+            };
+        },
+        /** Spread onto the tabpanel element for `tid` (usually the active id). */
+        panelProps: (tid) => ({
+            role: 'tabpanel',
+            id: panelId(tid),
+            'aria-labelledby': tabId(tid),
+            tabindex: 0,
+        }),
+    };
+}

package/dist/createTagsInput.svelte.d.ts

@@ -0,0 +1,65 @@
+/**
+ * createTagsInput - the HEADLESS core behind <SvTagsInput>: an editable
+ * token/chips field (type + Enter/comma to add, Backspace to remove the last,
+ * per-chip remove). Owns the draft text + add/remove behavior + keyboard,
+ * exposed as **prop-getters** you spread onto YOUR OWN markup. No styles/DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTagsInput } from '@svgrid/grid'
+ *   let tags = $state<string[]>([])
+ *   const ti = createTagsInput({ value: () => tags, onChange: (t) => (tags = t) })
+ * </script>
+ * <div {...ti.rootProps()}>
+ *   {#each ti.tags as tag, i (tag + i)}
+ *     <span {...ti.tagProps(i)}>{tag}<button {...ti.removeProps(i)}>x</button></span>
+ *   {/each}
+ *   <input {...ti.inputProps()} />
+ * </div>
+ * ```
+ */
+/** Reactive inputs are passed as getters so the core tracks live prop changes. */
+export type TagsInputConfig = {
+    value: () => string[];
+    onChange?: (tags: string[]) => void;
+    disabled?: () => boolean;
+    /** Reject duplicate tags. Default true. */
+    unique?: () => boolean;
+    max?: () => number;
+    ariaLabel?: () => string | undefined;
+};
+export declare function createTagsInput(config: TagsInputConfig): {
+    /** Current tags (controlled value). */
+    readonly tags: string[];
+    /** Current draft text in the input. */
+    readonly draft: string;
+    add: (raw: string) => void;
+    removeAt: (i: number) => void;
+    setDraft: (v: string) => void;
+    /** Spread onto the container element. */
+    rootProps: () => {
+        role: "group";
+        'aria-label': string | undefined;
+    };
+    /** Spread onto the text <input>. */
+    inputProps: () => {
+        type: "text";
+        value: string;
+        disabled: boolean;
+        'aria-label': string;
+        oninput: (e: Event) => void;
+        onkeydown: (e: KeyboardEvent) => void;
+        onblur: () => void;
+    };
+    /** Spread onto the chip wrapper at `index`. */
+    tagProps: (index: number) => {
+        'data-idx': number;
+    };
+    /** Spread onto a chip's remove <button> at `index`. */
+    removeProps: (index: number) => {
+        type: "button";
+        'aria-label': string;
+        onclick: () => void;
+    };
+};
+export type TagsInput = ReturnType<typeof createTagsInput>;

package/dist/createTagsInput.svelte.js

@@ -0,0 +1,93 @@
+/**
+ * createTagsInput - the HEADLESS core behind <SvTagsInput>: an editable
+ * token/chips field (type + Enter/comma to add, Backspace to remove the last,
+ * per-chip remove). Owns the draft text + add/remove behavior + keyboard,
+ * exposed as **prop-getters** you spread onto YOUR OWN markup. No styles/DOM.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTagsInput } from '@svgrid/grid'
+ *   let tags = $state<string[]>([])
+ *   const ti = createTagsInput({ value: () => tags, onChange: (t) => (tags = t) })
+ * </script>
+ * <div {...ti.rootProps()}>
+ *   {#each ti.tags as tag, i (tag + i)}
+ *     <span {...ti.tagProps(i)}>{tag}<button {...ti.removeProps(i)}>x</button></span>
+ *   {/each}
+ *   <input {...ti.inputProps()} />
+ * </div>
+ * ```
+ */
+export function createTagsInput(config) {
+    const disabled = () => config.disabled?.() ?? false;
+    const unique = () => config.unique?.() ?? true;
+    const max = () => config.max?.() ?? Infinity;
+    const tags = () => config.value();
+    let draft = $state('');
+    function add(raw) {
+        const tag = raw.trim();
+        if (!tag || disabled())
+            return;
+        if (tags().length >= max())
+            return;
+        if (unique() && tags().includes(tag)) {
+            draft = '';
+            return;
+        }
+        config.onChange?.([...tags(), tag]);
+        draft = '';
+    }
+    function removeAt(i) {
+        if (disabled())
+            return;
+        config.onChange?.(tags().filter((_, idx) => idx !== i));
+    }
+    function setDraft(v) { draft = v; }
+    function onInput(e) { draft = e.currentTarget.value; }
+    function onKeydown(e) {
+        if (disabled())
+            return;
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            add(draft);
+        }
+        else if (e.key === 'Backspace' && draft === '' && tags().length) {
+            removeAt(tags().length - 1);
+        }
+    }
+    function onBlur() { add(draft); }
+    return {
+        /** Current tags (controlled value). */
+        get tags() { return tags(); },
+        /** Current draft text in the input. */
+        get draft() { return draft; },
+        add,
+        removeAt,
+        setDraft,
+        /** Spread onto the container element. */
+        rootProps: () => ({
+            role: 'group',
+            'aria-label': config.ariaLabel?.(),
+        }),
+        /** Spread onto the text <input>. */
+        inputProps: () => ({
+            type: 'text',
+            value: draft,
+            disabled: disabled(),
+            'aria-label': config.ariaLabel?.() ?? 'Add tag',
+            oninput: onInput,
+            onkeydown: onKeydown,
+            onblur: onBlur,
+        }),
+        /** Spread onto the chip wrapper at `index`. */
+        tagProps: (index) => ({
+            'data-idx': index,
+        }),
+        /** Spread onto a chip's remove <button> at `index`. */
+        removeProps: (index) => ({
+            type: 'button',
+            'aria-label': `Remove ${tags()[index] ?? ''}`,
+            onclick: () => removeAt(index),
+        }),
+    };
+}

package/dist/createTimePicker.svelte.d.ts

@@ -0,0 +1,106 @@
+/**
+ * createTimePicker - the HEADLESS core behind <SvTimePicker>: a runes-based
+ * state machine for an analog clock-dial time picker (12/24-hour, minute
+ * snapping, hour->minute auto-switch, keyboard) plus the pure dial geometry
+ * (tick coordinates + hand endpoint) and **prop-getters** you spread onto YOUR
+ * OWN markup. The DOM-bound pieces - pointer capture + `getBoundingClientRect`
+ * hit-testing - stay in the styled component; this core exposes `SIZE`/`C` and a
+ * pure `pointerSelect(angle, dist)` so the component only has to convert an event
+ * into an angle.
+ *
+ * ```svelte
+ * <script lang="ts">
+ *   import { createTimePicker } from '@svgrid/grid'
+ *   let value = $state<Date | null>(new Date())
+ *   const tp = createTimePicker({ value: () => value, onChange: (d) => (value = d) })
+ * </script>
+ * <button {...tp.segProps('hour')}>{tp.displayHour}</button>:<button {...tp.segProps('minute')}>{tp.mm}</button>
+ * ```
+ */
+export type TimeValue = Date | string | number | null;
+export type TimeSelection = 'hour' | 'minute';
+export type TimeFormat = '12-hour' | '24-hour';
+/** A clock-face number and its computed position on the dial. */
+export type DialTick = {
+    label: string;
+    x: number;
+    y: number;
+    value: number;
+    ring: 'outer' | 'inner';
+};
+/** Reactive inputs are getters; callbacks are closures. */
+export type TimePickerConfig = {
+    /** Date, "HH:MM[:SS]" string, or epoch ms. */
+    value: () => TimeValue;
+    /** Fires with a Date (today's date carrying the picked time). */
+    onChange?: (value: Date) => void;
+    format?: () => TimeFormat;
+    minuteInterval?: () => number;
+    /** After picking an hour, jump the dial to minutes. Default true. */
+    autoSwitchToMinutes?: () => boolean;
+    disabled?: () => boolean;
+    readonly?: () => boolean;
+    /** Which dial opens first. */
+    selection?: () => TimeSelection;
+};
+/** Parse a time value to { h, m }, falling back to "now" (pure). */
+export declare function parseTimeValue(v: TimeValue): {
+    h: number;
+    m: number;
+};
+export declare function createTimePicker(config: TimePickerConfig): {
+    SIZE: number;
+    C: number;
+    readonly hours: number;
+    readonly minutes: number;
+    readonly selection: TimeSelection;
+    readonly is12: boolean;
+    readonly isInteractive: boolean;
+    readonly displayHour: number;
+    readonly isPm: boolean;
+    readonly mm: string;
+    readonly hourTicks: DialTick[];
+    readonly minuteTicks: DialTick[];
+    readonly handEnd: {
+        x: number;
+        y: number;
+    };
+    isActiveHour: (t: DialTick) => boolean;
+    setSelection: (s: TimeSelection) => void;
+    setMinute: (m: number) => void;
+    setAmPm: (pm: boolean) => void;
+    pointerSelect: (angle: number, dist: number) => void;
+    endPointer: () => void;
+    onKeydown: (e: KeyboardEvent) => void;
+    now: () => void;
+    /** The hour / minute segment button in the header. */
+    segProps(which: TimeSelection): {
+        type: "button";
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** An AM / PM toggle button (12-hour mode). */
+    ampmProps(pm: boolean): {
+        type: "button";
+        disabled: boolean;
+        onclick: () => void;
+    };
+    /** The clock dial: ARIA slider semantics + keyboard. Pointer capture stays in
+     *  the component (it needs the DOM element). */
+    dialProps(): {
+        role: "slider";
+        tabindex: number;
+        'aria-label': string;
+        'aria-valuenow': number;
+        'aria-valuemin': number;
+        'aria-valuemax': number;
+        onkeydown: (e: KeyboardEvent) => void;
+    };
+    /** The Now footer button. */
+    nowProps(): {
+        type: "button";
+        disabled: boolean;
+        onclick: () => void;
+    };
+};
+export type TimePicker = ReturnType<typeof createTimePicker>;

package/dist/createTimePicker.svelte.js

@@ -0,0 +1,248 @@
+// --- Dial geometry (pure) -----------------------------------------------------
+const SIZE = 240;
+const C = SIZE / 2;
+const OUTER = C - 22;
+const INNER = C - 58;
+function pointAt(angleDeg, r) {
+    const rad = ((angleDeg - 90) * Math.PI) / 180;
+    return { x: C + r * Math.cos(rad), y: C + r * Math.sin(rad) };
+}
+/** Parse a time value to { h, m }, falling back to "now" (pure). */
+export function parseTimeValue(v) {
+    if (v == null) {
+        const n = new Date();
+        return { h: n.getHours(), m: n.getMinutes() };
+    }
+    if (typeof v === 'string') {
+        const mt = v.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?/);
+        if (mt)
+            return { h: Math.min(23, +mt[1]), m: Math.min(59, +mt[2]) };
+        const d = new Date(v);
+        if (!isNaN(d.getTime()))
+            return { h: d.getHours(), m: d.getMinutes() };
+        const n = new Date();
+        return { h: n.getHours(), m: n.getMinutes() };
+    }
+    const d = new Date(v);
+    return { h: d.getHours(), m: d.getMinutes() };
+}
+export function createTimePicker(config) {
+    const format = () => config.format?.() ?? '24-hour';
+    const minuteInterval = () => config.minuteInterval?.() ?? 1;
+    const autoSwitchToMinutes = () => config.autoSwitchToMinutes?.() ?? true;
+    const isDisabled = () => config.disabled?.() ?? false;
+    const isReadonly = () => config.readonly?.() ?? false;
+    const is12 = $derived(format() === '12-hour');
+    const isInteractive = $derived(!isDisabled() && !isReadonly());
+    let hours = $state(0);
+    let minutes = $state(0);
+    let sel = $state('hour');
+    let seeded = false;
+    let lastKey = '￿';
+    $effect(() => {
+        const { h, m } = parseTimeValue(config.value());
+        const key = `${h}:${m}`;
+        if (key !== lastKey) {
+            lastKey = key;
+            hours = h;
+            minutes = m;
+            if (!seeded) {
+                seeded = true;
+                sel = config.selection?.() ?? 'hour';
+            }
+        }
+    });
+    const displayHour = $derived(is12 ? (hours % 12 === 0 ? 12 : hours % 12) : hours);
+    const isPm = $derived(hours >= 12);
+    const mm = $derived(String(minutes).padStart(2, '0'));
+    const hourTicks = $derived.by(() => {
+        const ticks = [];
+        if (is12) {
+            for (let i = 0; i < 12; i++) {
+                const h = i === 0 ? 12 : i;
+                const p = pointAt(i * 30, OUTER);
+                ticks.push({ label: String(h), x: p.x, y: p.y, value: h, ring: 'outer' });
+            }
+        }
+        else {
+            for (let i = 0; i < 12; i++) {
+                const outer = pointAt(i * 30, OUTER); // 12..23
+                const inner = pointAt(i * 30, INNER); // 00..11
+                const ho = i + 12;
+                const hi = i;
+                ticks.push({ label: String(ho).padStart(2, '0'), x: outer.x, y: outer.y, value: ho, ring: 'outer' });
+                ticks.push({ label: hi === 0 ? '00' : String(hi).padStart(2, '0'), x: inner.x, y: inner.y, value: hi, ring: 'inner' });
+            }
+        }
+        return ticks;
+    });
+    const minuteTicks = $derived.by(() => Array.from({ length: 12 }, (_, i) => {
+        const v = i * 5;
+        const p = pointAt(i * 30, OUTER);
+        return { label: String(v).padStart(2, '0'), x: p.x, y: p.y, value: v, ring: 'outer' };
+    }));
+    // Hand endpoint for the current selection.
+    const handAngle = $derived(sel === 'hour' ? (is12 ? (displayHour % 12) * 30 : (hours % 12) * 30) : minutes * 6);
+    const handRadius = $derived(sel === 'hour' && !is12 && hours % 12 === hours && hours < 12 ? INNER : OUTER);
+    const handEnd = $derived(pointAt(handAngle, handRadius));
+    // --- Emit + mutators -------------------------------------------------------
+    function emit() {
+        const d = new Date();
+        d.setHours(hours, minutes, 0, 0);
+        config.onChange?.(d);
+    }
+    const snap = (m) => {
+        const step = Math.max(1, Math.floor(minuteInterval()));
+        return (Math.round(m / step) * step) % 60;
+    };
+    function setSelection(s) { sel = s; }
+    function setMinute(m) {
+        minutes = snap(m);
+        lastKey = `${hours}:${minutes}`;
+        emit();
+    }
+    function setAmPm(pm) {
+        if (pm === isPm)
+            return;
+        hours = pm ? (hours % 12) + 12 : hours % 12;
+        lastKey = `${hours}:${minutes}`;
+        emit();
+    }
+    /** Apply a dial angle (0..360, 12 o'clock = 0) + distance from center. The
+     *  styled component converts a pointer event into these via the DOM rect. */
+    function pointerSelect(angle, dist) {
+        if (!isInteractive)
+            return;
+        if (sel === 'hour') {
+            const idx = Math.round(angle / 30) % 12;
+            if (is12) {
+                const h = idx === 0 ? 12 : idx;
+                const base = h % 12;
+                hours = isPm ? base + 12 : base;
+            }
+            else {
+                const inner = dist < (OUTER + INNER) / 2;
+                hours = inner ? idx : idx + 12;
+            }
+            lastKey = `${hours}:${minutes}`;
+            emit();
+        }
+        else {
+            const m = Math.round(angle / 6) % 60;
+            setMinute(m);
+        }
+    }
+    /** Called on pointer-up: auto-advance hour -> minute when configured. */
+    function endPointer() {
+        if (sel === 'hour' && autoSwitchToMinutes())
+            sel = 'minute';
+    }
+    function onKeydown(e) {
+        if (!isInteractive)
+            return;
+        const step = sel === 'minute' ? Math.max(1, Math.floor(minuteInterval())) : 1;
+        if (e.key === 'ArrowUp' || e.key === 'ArrowRight') {
+            e.preventDefault();
+            if (sel === 'hour') {
+                hours = (hours + 1) % 24;
+            }
+            else {
+                minutes = (minutes + step) % 60;
+            }
+            lastKey = `${hours}:${minutes}`;
+            emit();
+        }
+        else if (e.key === 'ArrowDown' || e.key === 'ArrowLeft') {
+            e.preventDefault();
+            if (sel === 'hour') {
+                hours = (hours + 23) % 24;
+            }
+            else {
+                minutes = (minutes - step + 60) % 60;
+            }
+            lastKey = `${hours}:${minutes}`;
+            emit();
+        }
+        else if (e.key === 'Tab' && !e.shiftKey && sel === 'hour') {
+            sel = 'minute';
+        }
+    }
+    function now() {
+        const n = new Date();
+        hours = n.getHours();
+        minutes = n.getMinutes();
+        lastKey = `${hours}:${minutes}`;
+        emit();
+    }
+    function isActiveHour(t) {
+        if (is12)
+            return t.value === displayHour;
+        return t.value === hours;
+    }
+    return {
+        // Dial geometry constants (the component needs these to map a pointer event
+        // to an angle without re-deriving the layout).
+        SIZE,
+        C,
+        // --- Reactive state -------------------------------------------------------
+        get hours() { return hours; },
+        get minutes() { return minutes; },
+        get selection() { return sel; },
+        get is12() { return is12; },
+        get isInteractive() { return isInteractive; },
+        get displayHour() { return displayHour; },
+        get isPm() { return isPm; },
+        get mm() { return mm; },
+        get hourTicks() { return hourTicks; },
+        get minuteTicks() { return minuteTicks; },
+        get handEnd() { return handEnd; },
+        // --- Derived helpers ------------------------------------------------------
+        isActiveHour,
+        // --- Actions --------------------------------------------------------------
+        setSelection,
+        setMinute,
+        setAmPm,
+        pointerSelect,
+        endPointer,
+        onKeydown,
+        now,
+        // --- Prop-getters ---------------------------------------------------------
+        /** The hour / minute segment button in the header. */
+        segProps(which) {
+            return {
+                type: 'button',
+                disabled: isDisabled(),
+                onclick: () => setSelection(which),
+            };
+        },
+        /** An AM / PM toggle button (12-hour mode). */
+        ampmProps(pm) {
+            return {
+                type: 'button',
+                disabled: isDisabled(),
+                onclick: () => setAmPm(pm),
+            };
+        },
+        /** The clock dial: ARIA slider semantics + keyboard. Pointer capture stays in
+         *  the component (it needs the DOM element). */
+        dialProps() {
+            return {
+                role: 'slider',
+                tabindex: isDisabled() ? -1 : 0,
+                'aria-label': sel === 'hour' ? 'Hour' : 'Minute',
+                'aria-valuenow': sel === 'hour' ? hours : minutes,
+                'aria-valuemin': 0,
+                'aria-valuemax': sel === 'hour' ? 23 : 59,
+                onkeydown: onKeydown,
+            };
+        },
+        /** The Now footer button. */
+        nowProps() {
+            return {
+                type: 'button',
+                disabled: isDisabled(),
+                onclick: now,
+            };
+        },
+    };
+}