@llui/components 0.0.1

package/dist/components/steps.js

@@ -0,0 +1,133 @@
+export function init(opts = {}) {
+    return {
+        current: opts.current ?? 0,
+        completed: opts.completed ?? [],
+        errors: [],
+        steps: opts.steps ?? [],
+        linear: opts.linear ?? true,
+        disabled: opts.disabled ?? false,
+    };
+}
+function canGoTo(state, step) {
+    if (step < 0 || step >= state.steps.length)
+        return false;
+    if (!state.linear)
+        return true;
+    // Linear: only previous, current, or next-if-current-completed
+    if (step <= state.current)
+        return true;
+    if (step === state.current + 1 && state.completed.includes(state.current))
+        return true;
+    return false;
+}
+export function update(state, msg) {
+    if (state.disabled)
+        return [state, []];
+    switch (msg.type) {
+        case 'goTo':
+            if (!canGoTo(state, msg.step))
+                return [state, []];
+            return [{ ...state, current: msg.step }, []];
+        case 'next': {
+            const next = state.current + 1;
+            if (next >= state.steps.length)
+                return [state, []];
+            // Completing current step moves forward
+            const completed = state.completed.includes(state.current)
+                ? state.completed
+                : [...state.completed, state.current];
+            return [{ ...state, current: next, completed }, []];
+        }
+        case 'prev': {
+            if (state.current === 0)
+                return [state, []];
+            return [{ ...state, current: state.current - 1 }, []];
+        }
+        case 'complete': {
+            if (state.completed.includes(msg.step))
+                return [state, []];
+            return [
+                {
+                    ...state,
+                    completed: [...state.completed, msg.step],
+                    errors: state.errors.filter((e) => e !== msg.step),
+                },
+                [],
+            ];
+        }
+        case 'markError':
+            if (state.errors.includes(msg.step))
+                return [state, []];
+            return [{ ...state, errors: [...state.errors, msg.step] }, []];
+        case 'clearError':
+            return [{ ...state, errors: state.errors.filter((e) => e !== msg.step) }, []];
+        case 'reset':
+            return [{ ...state, current: 0, completed: [], errors: [] }, []];
+    }
+}
+export function stepStatus(state, step) {
+    if (state.errors.includes(step))
+        return 'error';
+    if (step === state.current)
+        return 'current';
+    if (state.completed.includes(step))
+        return 'completed';
+    return 'pending';
+}
+export function connect(get, send, opts = {}) {
+    const label = opts.label ?? 'Progress';
+    return {
+        root: {
+            role: 'group',
+            'aria-label': label,
+            'data-scope': 'steps',
+            'data-part': 'root',
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+        },
+        nextTrigger: {
+            type: 'button',
+            disabled: (s) => {
+                const st = get(s);
+                return st.disabled || st.current >= st.steps.length - 1;
+            },
+            'data-scope': 'steps',
+            'data-part': 'next-trigger',
+            onClick: () => send({ type: 'next' }),
+        },
+        prevTrigger: {
+            type: 'button',
+            disabled: (s) => {
+                const st = get(s);
+                return st.disabled || st.current === 0;
+            },
+            'data-scope': 'steps',
+            'data-part': 'prev-trigger',
+            onClick: () => send({ type: 'prev' }),
+        },
+        item: (index) => ({
+            item: {
+                'data-scope': 'steps',
+                'data-part': 'item',
+                'data-status': (s) => stepStatus(get(s), index),
+                'data-index': String(index),
+                'aria-current': (s) => (get(s).current === index ? 'step' : undefined),
+            },
+            trigger: {
+                type: 'button',
+                'aria-label': `Step ${index + 1}`,
+                disabled: (s) => !canGoTo(get(s), index),
+                'data-scope': 'steps',
+                'data-part': 'trigger',
+                'data-status': (s) => stepStatus(get(s), index),
+                onClick: () => send({ type: 'goTo', step: index }),
+            },
+            separator: {
+                'data-scope': 'steps',
+                'data-part': 'separator',
+                'data-status': (s) => stepStatus(get(s), index),
+                'aria-hidden': 'true',
+            },
+        }),
+    };
+}
+export const steps = { init, update, connect, stepStatus };

package/dist/components/switch.d.ts

@@ -0,0 +1,66 @@
+import type { Send } from '@llui/dom';
+/**
+ * Switch — two-state on/off control. Semantically like a checkbox but
+ * visually a toggle track + thumb. Uses `role="switch"` for ARIA.
+ */
+export interface SwitchState {
+    checked: boolean;
+    disabled: boolean;
+}
+export type SwitchMsg = {
+    type: 'toggle';
+} | {
+    type: 'setChecked';
+    checked: boolean;
+} | {
+    type: 'setDisabled';
+    disabled: boolean;
+};
+export interface SwitchInit {
+    checked?: boolean;
+    disabled?: boolean;
+}
+export declare function init(opts?: SwitchInit): SwitchState;
+export declare function update(state: SwitchState, msg: SwitchMsg): [SwitchState, never[]];
+export interface SwitchParts<S> {
+    root: {
+        role: 'switch';
+        'aria-checked': (s: S) => boolean;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        'data-state': (s: S) => 'checked' | 'unchecked';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'switch';
+        'data-part': 'root';
+        tabIndex: (s: S) => number;
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+    };
+    track: {
+        'data-state': (s: S) => 'checked' | 'unchecked';
+        'data-scope': 'switch';
+        'data-part': 'track';
+    };
+    thumb: {
+        'data-state': (s: S) => 'checked' | 'unchecked';
+        'data-scope': 'switch';
+        'data-part': 'thumb';
+    };
+    hiddenInput: {
+        type: 'checkbox';
+        role: 'switch';
+        'aria-hidden': 'true';
+        tabIndex: -1;
+        style: string;
+        checked: (s: S) => boolean;
+        disabled: (s: S) => boolean;
+        'data-scope': 'switch';
+        'data-part': 'hidden-input';
+    };
+}
+export declare function connect<S>(get: (s: S) => SwitchState, send: Send<SwitchMsg>): SwitchParts<S>;
+export declare const switchMachine: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+};
+//# sourceMappingURL=switch.d.ts.map

package/dist/components/switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAA;AAErC;;;GAGG;AAEH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,MAAM,MAAM,SAAS,GACjB;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAClB;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAAE,GACxC;IAAE,IAAI,EAAE,aAAa,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAA;AAE9C,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,wBAAgB,IAAI,CAAC,IAAI,GAAE,UAAe,GAAG,WAAW,CAEvD;AAED,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,EAAE,GAAG,EAAE,SAAS,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,CAAC,CAUjF;AAED,MAAM,WAAW,WAAW,CAAC,CAAC;IAC5B,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ,CAAA;QACd,cAAc,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QACjC,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,GAAG,SAAS,CAAA;QAC7C,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,GAAG,WAAW,CAAA;QAC/C,eAAe,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,SAAS,CAAA;QACzC,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,MAAM,CAAA;QACnB,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;QAC1B,OAAO,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAA;QAChC,SAAS,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAA;KACtC,CAAA;IACD,KAAK,EAAE;QACL,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,GAAG,WAAW,CAAA;QAC/C,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;IACD,KAAK,EAAE;QACL,YAAY,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,GAAG,WAAW,CAAA;QAC/C,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,OAAO,CAAA;KACrB,CAAA;IACD,WAAW,EAAE;QACX,IAAI,EAAE,UAAU,CAAA;QAChB,IAAI,EAAE,QAAQ,CAAA;QACd,aAAa,EAAE,MAAM,CAAA;QACrB,QAAQ,EAAE,CAAC,CAAC,CAAA;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC1B,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,OAAO,CAAA;QAC3B,YAAY,EAAE,QAAQ,CAAA;QACtB,WAAW,EAAE,cAAc,CAAA;KAC5B,CAAA;CACF;AAKD,wBAAgB,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,WAAW,EAAE,IAAI,EAAE,IAAI,CAAC,SAAS,CAAC,GAAG,WAAW,CAAC,CAAC,CAAC,CAyC5F;AAED,eAAO,MAAM,aAAa;;;;CAA4B,CAAA"}

package/dist/components/switch.js

@@ -0,0 +1,59 @@
+export function init(opts = {}) {
+    return { checked: opts.checked ?? false, disabled: opts.disabled ?? false };
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'toggle':
+            if (state.disabled)
+                return [state, []];
+            return [{ ...state, checked: !state.checked }, []];
+        case 'setChecked':
+            return [{ ...state, checked: msg.checked }, []];
+        case 'setDisabled':
+            return [{ ...state, disabled: msg.disabled }, []];
+    }
+}
+const HIDDEN_STYLE = 'position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;';
+export function connect(get, send) {
+    return {
+        root: {
+            role: 'switch',
+            'aria-checked': (s) => get(s).checked,
+            'aria-disabled': (s) => (get(s).disabled ? 'true' : undefined),
+            'data-state': (s) => (get(s).checked ? 'checked' : 'unchecked'),
+            'data-disabled': (s) => (get(s).disabled ? '' : undefined),
+            'data-scope': 'switch',
+            'data-part': 'root',
+            tabIndex: (s) => (get(s).disabled ? -1 : 0),
+            onClick: () => send({ type: 'toggle' }),
+            onKeyDown: (e) => {
+                if (e.key === ' ' || e.key === 'Enter') {
+                    e.preventDefault();
+                    send({ type: 'toggle' });
+                }
+            },
+        },
+        track: {
+            'data-state': (s) => (get(s).checked ? 'checked' : 'unchecked'),
+            'data-scope': 'switch',
+            'data-part': 'track',
+        },
+        thumb: {
+            'data-state': (s) => (get(s).checked ? 'checked' : 'unchecked'),
+            'data-scope': 'switch',
+            'data-part': 'thumb',
+        },
+        hiddenInput: {
+            type: 'checkbox',
+            role: 'switch',
+            'aria-hidden': 'true',
+            tabIndex: -1,
+            style: HIDDEN_STYLE,
+            checked: (s) => get(s).checked,
+            disabled: (s) => get(s).disabled,
+            'data-scope': 'switch',
+            'data-part': 'hidden-input',
+        },
+    };
+}
+export const switchMachine = { init, update, connect };

package/dist/components/tabs.d.ts

@@ -0,0 +1,146 @@
+import type { Send } from '@llui/dom';
+/**
+ * Tabs — tabbed interface with keyboard navigation. Each tab has a value
+ * (string) that identifies both the trigger and the associated panel.
+ *
+ * Two activation modes:
+ *   - `'automatic'` (default): focusing a trigger also activates it.
+ *   - `'manual'`: arrow keys move focus without activating; Enter/Space activates.
+ */
+export type Orientation = 'horizontal' | 'vertical';
+export type Activation = 'automatic' | 'manual';
+export interface TabsState {
+    value: string;
+    items: string[];
+    disabledItems: string[];
+    orientation: Orientation;
+    activation: Activation;
+    /** The currently focused (but not necessarily active) tab. For manual mode. */
+    focused: string | null;
+    /** Whether Arrow navigation wraps at the ends of the tab list. Default: true. */
+    loopFocus: boolean;
+    /** Whether clicking the active tab deselects it (empty value). Default: false. */
+    deselectable: boolean;
+}
+export type TabsMsg = {
+    type: 'setValue';
+    value: string;
+} | {
+    type: 'setItems';
+    items: string[];
+    disabled?: string[];
+} | {
+    type: 'focusTab';
+    value: string;
+} | {
+    type: 'focusNext';
+    from: string;
+} | {
+    type: 'focusPrev';
+    from: string;
+} | {
+    type: 'focusFirst';
+} | {
+    type: 'focusLast';
+} | {
+    type: 'activateFocused';
+};
+export interface TabsInit {
+    value?: string;
+    items?: string[];
+    disabledItems?: string[];
+    orientation?: Orientation;
+    activation?: Activation;
+    loopFocus?: boolean;
+    deselectable?: boolean;
+}
+export declare function init(opts?: TabsInit): TabsState;
+export declare function update(state: TabsState, msg: TabsMsg): [TabsState, never[]];
+export interface TabsItemParts<S> {
+    trigger: {
+        type: 'button';
+        role: 'tab';
+        'aria-selected': (s: S) => boolean;
+        'aria-controls': string;
+        'aria-disabled': (s: S) => 'true' | undefined;
+        id: string;
+        'data-state': (s: S) => 'active' | 'inactive';
+        'data-disabled': (s: S) => '' | undefined;
+        'data-scope': 'tabs';
+        'data-part': 'trigger';
+        'data-value': string;
+        tabIndex: (s: S) => number;
+        onClick: (e: MouseEvent) => void;
+        onKeyDown: (e: KeyboardEvent) => void;
+        onFocus: (e: FocusEvent) => void;
+    };
+    panel: {
+        role: 'tabpanel';
+        id: string;
+        'aria-labelledby': string;
+        tabIndex: 0;
+        hidden: (s: S) => boolean;
+        'data-state': (s: S) => 'active' | 'inactive';
+        'data-scope': 'tabs';
+        'data-part': 'panel';
+        'data-value': string;
+    };
+}
+export interface TabsParts<S> {
+    root: {
+        'data-scope': 'tabs';
+        'data-part': 'root';
+        'data-orientation': (s: S) => Orientation;
+    };
+    /**
+     * A movable underline/highlight element. Position tracks the active
+     * trigger via CSS custom properties written by `watchTabIndicator()`:
+     *   `--indicator-left`, `--indicator-top`, `--indicator-width`,
+     *   `--indicator-height` — all in pixels.
+     * The consumer styles the indicator using these properties (e.g.
+     * `transform: translateX(var(--indicator-left))`).
+     */
+    indicator: {
+        'data-scope': 'tabs';
+        'data-part': 'indicator';
+        'data-orientation': (s: S) => Orientation;
+    };
+    list: {
+        role: 'tablist';
+        'aria-orientation': (s: S) => Orientation;
+        'data-scope': 'tabs';
+        'data-part': 'list';
+    };
+    item: (value: string) => TabsItemParts<S>;
+}
+export interface ConnectOptions {
+    id: string;
+    /**
+     * Called whenever a tab is clicked/activated. Useful for anchor-style
+     * navigation where the tab's value is a URL path and you want to push
+     * to the history or router.
+     */
+    onNavigate?: (value: string) => void;
+}
+export declare function connect<S>(get: (s: S) => TabsState, send: Send<TabsMsg>, opts: ConnectOptions): TabsParts<S>;
+/**
+ * Track the active tab trigger and update CSS custom properties on the
+ * indicator element so it can be animated into position. Call from
+ * `onMount` with the tabs root element; the returned function removes
+ * the observers.
+ *
+ * Sets `--indicator-left`, `--indicator-top`, `--indicator-width`,
+ * `--indicator-height` on the indicator element every time the active
+ * trigger changes or the list resizes. Style the indicator with:
+ *   transform: translate(var(--indicator-left), var(--indicator-top));
+ *   width: var(--indicator-width);
+ *   height: var(--indicator-height);
+ */
+export declare function watchTabIndicator(root: HTMLElement): () => void;
+export declare const tabs: {
+    init: typeof init;
+    update: typeof update;
+    connect: typeof connect;
+    watchTabIndicator: typeof watchTabIndicator;
+};
+//# sourceMappingURL=tabs.d.ts.map

package/dist/components/tabs.d.ts.map

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

package/dist/components/tabs.js

@@ -0,0 +1,244 @@
+export function init(opts = {}) {
+    const items = opts.items ?? [];
+    return {
+        value: opts.value ?? items[0] ?? '',
+        items,
+        disabledItems: opts.disabledItems ?? [],
+        orientation: opts.orientation ?? 'horizontal',
+        activation: opts.activation ?? 'automatic',
+        focused: null,
+        loopFocus: opts.loopFocus ?? true,
+        deselectable: opts.deselectable ?? false,
+    };
+}
+function firstEnabled(items, disabled) {
+    for (const v of items)
+        if (!disabled.includes(v))
+            return v;
+    return null;
+}
+function lastEnabled(items, disabled) {
+    for (let i = items.length - 1; i >= 0; i--) {
+        const v = items[i];
+        if (!disabled.includes(v))
+            return v;
+    }
+    return null;
+}
+function nextEnabled(items, disabled, from, delta, loop) {
+    if (items.length === 0)
+        return null;
+    const idx = items.indexOf(from);
+    if (idx === -1)
+        return firstEnabled(items, disabled);
+    const n = items.length;
+    for (let i = 1; i <= n; i++) {
+        const rawIdx = idx + delta * i;
+        if (!loop && (rawIdx < 0 || rawIdx >= n))
+            return null;
+        const next = items[(rawIdx + n * n) % n];
+        if (!disabled.includes(next))
+            return next;
+    }
+    return null;
+}
+export function update(state, msg) {
+    switch (msg.type) {
+        case 'setValue':
+            if (state.disabledItems.includes(msg.value))
+                return [state, []];
+            return [{ ...state, value: msg.value }, []];
+        case 'setItems': {
+            const disabled = msg.disabled ?? state.disabledItems;
+            // Ensure value still points to an existing enabled item
+            let value = state.value;
+            if (!msg.items.includes(value) || disabled.includes(value)) {
+                value = firstEnabled(msg.items, disabled) ?? '';
+            }
+            return [{ ...state, items: msg.items, disabledItems: disabled, value }, []];
+        }
+        case 'focusTab': {
+            if (state.disabledItems.includes(msg.value))
+                return [state, []];
+            const next = { ...state, focused: msg.value };
+            if (state.activation === 'automatic') {
+                // Deselectable: clicking the already-active tab clears the value.
+                next.value = state.deselectable && state.value === msg.value ? '' : msg.value;
+            }
+            return [next, []];
+        }
+        case 'focusNext': {
+            const to = nextEnabled(state.items, state.disabledItems, msg.from, 1, state.loopFocus);
+            if (to === null)
+                return [state, []];
+            const next = { ...state, focused: to };
+            if (state.activation === 'automatic')
+                next.value = to;
+            return [next, []];
+        }
+        case 'focusPrev': {
+            const to = nextEnabled(state.items, state.disabledItems, msg.from, -1, state.loopFocus);
+            if (to === null)
+                return [state, []];
+            const next = { ...state, focused: to };
+            if (state.activation === 'automatic')
+                next.value = to;
+            return [next, []];
+        }
+        case 'focusFirst': {
+            const to = firstEnabled(state.items, state.disabledItems);
+            if (to === null)
+                return [state, []];
+            const next = { ...state, focused: to };
+            if (state.activation === 'automatic')
+                next.value = to;
+            return [next, []];
+        }
+        case 'focusLast': {
+            const to = lastEnabled(state.items, state.disabledItems);
+            if (to === null)
+                return [state, []];
+            const next = { ...state, focused: to };
+            if (state.activation === 'automatic')
+                next.value = to;
+            return [next, []];
+        }
+        case 'activateFocused': {
+            if (state.focused === null)
+                return [state, []];
+            return [{ ...state, value: state.focused }, []];
+        }
+    }
+}
+export function connect(get, send, opts) {
+    const base = opts.id;
+    const triggerId = (v) => `${base}:trigger:${v}`;
+    const panelId = (v) => `${base}:panel:${v}`;
+    return {
+        root: {
+            'data-scope': 'tabs',
+            'data-part': 'root',
+            'data-orientation': (s) => get(s).orientation,
+        },
+        list: {
+            role: 'tablist',
+            'aria-orientation': (s) => get(s).orientation,
+            'data-scope': 'tabs',
+            'data-part': 'list',
+        },
+        indicator: {
+            'data-scope': 'tabs',
+            'data-part': 'indicator',
+            'data-orientation': (s) => get(s).orientation,
+        },
+        item: (value) => ({
+            trigger: {
+                type: 'button',
+                role: 'tab',
+                'aria-selected': (s) => get(s).value === value,
+                'aria-controls': panelId(value),
+                'aria-disabled': (s) => (get(s).disabledItems.includes(value) ? 'true' : undefined),
+                id: triggerId(value),
+                'data-state': (s) => (get(s).value === value ? 'active' : 'inactive'),
+                'data-disabled': (s) => (get(s).disabledItems.includes(value) ? '' : undefined),
+                'data-scope': 'tabs',
+                'data-part': 'trigger',
+                'data-value': value,
+                tabIndex: (s) => (get(s).value === value ? 0 : -1),
+                onClick: () => {
+                    send({ type: 'focusTab', value });
+                    opts.onNavigate?.(value);
+                },
+                onFocus: () => {
+                    // `focusTab` handles automatic activation
+                    send({ type: 'focusTab', value });
+                },
+                onKeyDown: (e) => {
+                    // Read orientation from the ancestor [data-part="list"] so the
+                    // handler can dispatch the correct arrow keys per WAI-ARIA.
+                    // Horizontal tabs: ArrowLeft/Right navigate; vertical: Up/Down.
+                    const target = e.currentTarget;
+                    const list = target?.closest('[data-scope="tabs"][data-part="list"]');
+                    const orientation = list?.getAttribute('aria-orientation') ?? 'horizontal';
+                    const nextKey = orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';
+                    const prevKey = orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';
+                    switch (e.key) {
+                        case nextKey:
+                            e.preventDefault();
+                            send({ type: 'focusNext', from: value });
+                            return;
+                        case prevKey:
+                            e.preventDefault();
+                            send({ type: 'focusPrev', from: value });
+                            return;
+                        case 'Home':
+                            e.preventDefault();
+                            send({ type: 'focusFirst' });
+                            return;
+                        case 'End':
+                            e.preventDefault();
+                            send({ type: 'focusLast' });
+                            return;
+                        case 'Enter':
+                        case ' ':
+                            e.preventDefault();
+                            send({ type: 'activateFocused' });
+                            return;
+                    }
+                },
+            },
+            panel: {
+                role: 'tabpanel',
+                id: panelId(value),
+                'aria-labelledby': triggerId(value),
+                tabIndex: 0,
+                hidden: (s) => get(s).value !== value,
+                'data-state': (s) => (get(s).value === value ? 'active' : 'inactive'),
+                'data-scope': 'tabs',
+                'data-part': 'panel',
+                'data-value': value,
+            },
+        }),
+    };
+}
+/**
+ * Track the active tab trigger and update CSS custom properties on the
+ * indicator element so it can be animated into position. Call from
+ * `onMount` with the tabs root element; the returned function removes
+ * the observers.
+ *
+ * Sets `--indicator-left`, `--indicator-top`, `--indicator-width`,
+ * `--indicator-height` on the indicator element every time the active
+ * trigger changes or the list resizes. Style the indicator with:
+ *   transform: translate(var(--indicator-left), var(--indicator-top));
+ *   width: var(--indicator-width);
+ *   height: var(--indicator-height);
+ */
+export function watchTabIndicator(root) {
+    const indicator = root.querySelector('[data-scope="tabs"][data-part="indicator"]');
+    const list = root.querySelector('[data-scope="tabs"][data-part="list"]');
+    if (!indicator || !list)
+        return () => { };
+    const sync = () => {
+        const active = list.querySelector('[data-scope="tabs"][data-part="trigger"][data-state="active"]');
+        if (!active)
+            return;
+        indicator.style.setProperty('--indicator-left', `${active.offsetLeft}px`);
+        indicator.style.setProperty('--indicator-top', `${active.offsetTop}px`);
+        indicator.style.setProperty('--indicator-width', `${active.offsetWidth}px`);
+        indicator.style.setProperty('--indicator-height', `${active.offsetHeight}px`);
+    };
+    sync();
+    const mo = new MutationObserver(sync);
+    mo.observe(list, { attributes: true, attributeFilter: ['data-state'], subtree: true });
+    // ResizeObserver may be absent in older environments or jsdom — skip
+    // gracefully; layout changes that don't involve a data-state flip just
+    // won't reposition the indicator until the next attribute change.
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(sync) : null;
+    ro?.observe(list);
+    return () => {
+        mo.disconnect();
+        ro?.disconnect();
+    };
+}
+export const tabs = { init, update, connect, watchTabIndicator };