@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

package/dist/components/Headline/Headline.svelte

@@ -27,7 +27,10 @@
 </script>
 
 <!-- Headline.svelte -->
-<div class={`headline ${className}`} {...restProps}>
+<div
+    class={`headline ${className}`}
+    {...restProps}
+>
     {#if level === 1}
         <h1 class="headline-heading">{@render children?.()}</h1>
     {:else if level === 2}

package/dist/components/HeatmapChart/HeatmapChart.svelte

@@ -52,7 +52,11 @@
     class={`heatmap-chart ${className}`}
     {...restProps}
 >
-    <div class="heatmap-chart-graphic" role="img" aria-label={label}>
+    <div
+        class="heatmap-chart-graphic"
+        role="img"
+        aria-label={label}
+    >
         {@render children?.()}
     </div>
     {#if dataTable}

package/dist/components/HeatmapChartWithYearOfDays/HeatmapChartWithYearOfDays.svelte

@@ -63,7 +63,11 @@
     data-week-start={weekStart}
     {...restProps}
 >
-    <div class="heatmap-chart-with-year-of-days-graphic" role="img" aria-label={label}>
+    <div
+        class="heatmap-chart-with-year-of-days-graphic"
+        role="img"
+        aria-label={label}
+    >
         {@render children?.()}
     </div>
     {#if dataTable}

package/dist/components/Hero/Hero.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- Hero.svelte -->
-<div class={`hero ${className}`} aria-label={label} {...restProps}>
+<section
+    class={`hero ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</section>

package/dist/components/HongKongIdentityCardInput/HongKongIdentityCardInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // HongKongIdentityCardInput component
+    //
+    // A headless input for entering Hong Kong's Identity Card Number.
+    // Format: One or two letters, six digits and a check digit in parentheses, such as A123456(3). The check digit is 0 to 9 or A. Each letter counts as A=10 to Z=35, and a single letter is preceded by a space counted as 36; the eight values are multiplied by 9,8,7,6,5,4,3,2 and summed, and the check digit is 11 minus the sum's Modulus-11 remainder (0 when the remainder is 0, and A when the result is 10).
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <HongKongIdentityCardInput label="Hong Kong Identity Card Number" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Hong_Kong_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HongKongIdentityCardInput.svelte -->
+<input
+    class={`hong-kong-identity-card-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

package/dist/components/HongKongIdentityCardInput/HongKongIdentityCardInput.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const HongKongIdentityCardInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type HongKongIdentityCardInput = ReturnType<typeof HongKongIdentityCardInput>;
+export default HongKongIdentityCardInput;

package/dist/components/HongKongIdentityCardView/HongKongIdentityCardView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // HongKongIdentityCardView component
+    //
+    // A headless display component for showing Hong Kong's
+    // Hong Kong Identity Card Number in a read-only format.
+    // Format: One or two letters, six digits and a check digit in parentheses, such as A123456(3). The check digit is 0 to 9 or A. Each letter counts as A=10 to Z=35, and a single letter is preceded by a space counted as 36; the eight values are multiplied by 9,8,7,6,5,4,3,2 and summed, and the check digit is 11 minus the sum's Modulus-11 remainder (0 when the remainder is 0, and A when the result is 10).
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The identifier string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <HongKongIdentityCardView label="Hong Kong Identity Card Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Hong_Kong_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HongKongIdentityCardView.svelte -->
+<span
+    class={`hong-kong-identity-card-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

package/dist/components/HongKongIdentityCardView/HongKongIdentityCardView.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    [key: string]: unknown;
+};
+declare const HongKongIdentityCardView: import("svelte").Component<$$ComponentProps, {}, "">;
+type HongKongIdentityCardView = ReturnType<typeof HongKongIdentityCardView>;
+export default HongKongIdentityCardView;

package/dist/components/HorizontalScroller/HorizontalScroller.svelte

@@ -41,6 +41,7 @@
 </script>
 
 <!-- HorizontalScroller.svelte -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (a scrollable region must be keyboard-focusable (axe scrollable-region-focusable)) -->
 <div
     bind:this={scrollerEl}
     class={`horizontal-scroller ${className}`}

package/dist/components/HoverCard/HoverCard.svelte

@@ -2,7 +2,7 @@
     // HoverCard component
     //
     // A hover card that displays supplementary content when triggered, typically by a
-    // hover or focus interaction on a trigger element. It conditionally renders a container
+    // hover or focus interaction on a trigger element. It renders a popover="manual" container
     // with role="tooltip" when the open prop is true. Useful for user profile previews,
     // link previews, contextual help, or any popover-style content.
     //
@@ -44,14 +44,15 @@
     //   - Headless: no CSS, no styles — consumer provides all styling and positioning
     //   - Uses $bindable(false) for two-way binding on the open prop
     //   - Consumer is responsible for managing hover/focus events on the trigger element
-    //   - Fully removed from DOM when closed via {#if open}
-    //
+    //   - Native first: popover="manual" (top layer) opened and closed by the `open` state through ./Popover/popover.ts; where the Popover API is missing (jsdom, older browsers) it falls back to the `hidden` attribute. Placement is the theme's CSS (anchor positioning); light dismiss and Escape stay the consumer's.
     // References:
     //   - WAI-ARIA tooltip role: https://www.w3.org/TR/wai-aria-1.2/#tooltip
     //   - WAI-ARIA Tooltip Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/
 
     import type { Snippet } from "svelte";
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         label,
@@ -67,13 +68,13 @@
 </script>
 
 <!-- HoverCard.svelte -->
-{#if open}
-    <div
-        class={`hover-card ${className}`}
-        role="tooltip"
-        aria-label={label}
-        {...restProps}
-    >
-        {@render children?.()}
-    </div>
-{/if}
+<div
+    class={`hover-card ${className}`}
+    role="tooltip"
+    popover="manual"
+    use:popoverState={open}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/IconListItem/IconListItem.svelte

@@ -50,7 +50,10 @@
     {...restProps}
 >
     {#if icon}
-        <span class="icon-list-item-icon" aria-hidden="true">
+        <span
+            class="icon-list-item-icon"
+            aria-hidden="true"
+        >
             {@render icon()}
         </span>
     {/if}

package/dist/components/InputWithMask/InputWithMask.svelte

@@ -65,7 +65,10 @@
     data-mask={mask}
     {...restProps}
 >
-    <span class="input-with-mask-display" aria-hidden="true">{mask}</span>
+    <span
+        class="input-with-mask-display"
+        aria-hidden="true">{mask}</span
+    >
     <input
         class="input-with-mask-control"
         type="text"

package/dist/components/IranKodEMelliInput/IranKodEMelliInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // IranKodEMelliInput component
+    //
+    // A headless input for entering Iran's National Code (Kod-e Melli).
+    // Format: Ten digits whose last digit is a check digit. The first nine digits are multiplied by 10,9,8,7,6,5,4,3,2 and summed; with r the sum's Modulus-11 remainder, the check digit is r when r is less than 2, otherwise 11 minus r. A number whose ten digits are all the same is never valid.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <IranKodEMelliInput label="National Code (Kod-e Melli)" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Iranian_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- IranKodEMelliInput.svelte -->
+<input
+    class={`iran-kod-e-melli-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

package/dist/components/IranKodEMelliInput/IranKodEMelliInput.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const IranKodEMelliInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type IranKodEMelliInput = ReturnType<typeof IranKodEMelliInput>;
+export default IranKodEMelliInput;

package/dist/components/IranKodEMelliView/IranKodEMelliView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // IranKodEMelliView component
+    //
+    // A headless display component for showing Iran's
+    // National Code (Kod-e Melli) in a read-only format.
+    // Format: Ten digits whose last digit is a check digit. The first nine digits are multiplied by 10,9,8,7,6,5,4,3,2 and summed; with r the sum's Modulus-11 remainder, the check digit is r when r is less than 2, otherwise 11 minus r. A number whose ten digits are all the same is never valid.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The identifier string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <IranKodEMelliView label="National Code (Kod-e Melli)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Iranian_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- IranKodEMelliView.svelte -->
+<span
+    class={`iran-kod-e-melli-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

package/dist/components/IranKodEMelliView/IranKodEMelliView.svelte.d.ts

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    [key: string]: unknown;
+};
+declare const IranKodEMelliView: import("svelte").Component<$$ComponentProps, {}, "">;
+type IranKodEMelliView = ReturnType<typeof IranKodEMelliView>;
+export default IranKodEMelliView;

package/dist/components/Kbd/Kbd.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- Kbd.svelte -->
-<kbd class={`kbd ${className}`} aria-label={label} {...restProps}>
+<kbd
+    class={`kbd ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </kbd>

package/dist/components/KbdShortcut/KbdShortcut.svelte

@@ -42,8 +42,15 @@
 </script>
 
 <!-- KbdShortcut.svelte -->
-<kbd class={`kbd-shortcut ${className}`} aria-label={label} {...restProps}>
+<kbd
+    class={`kbd-shortcut ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {#each keys as key, i (i)}
-        {#if i > 0}<span class="kbd-shortcut-separator" aria-hidden="true">{separator}</span>{/if}<kbd class="kbd-shortcut-key">{key}</kbd>
+        {#if i > 0}<span
+                class="kbd-shortcut-separator"
+                aria-hidden="true">{separator}</span
+            >{/if}<kbd class="kbd-shortcut-key">{key}</kbd>
     {/each}
 </kbd>

package/dist/components/LineChart/LineChart.svelte

@@ -52,7 +52,11 @@
     class={`line-chart ${className}`}
     {...restProps}
 >
-    <div class="line-chart-graphic" role="img" aria-label={label}>
+    <div
+        class="line-chart-graphic"
+        role="img"
+        aria-label={label}
+    >
         {@render children?.()}
     </div>
     {#if dataTable}

package/dist/components/Listbox/Listbox.svelte

@@ -105,6 +105,7 @@
     //   - WAI-ARIA Listbox Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
 
     import type { Snippet } from "svelte";
+    import { initialListboxState, listboxKeydown } from "./listbox-machine";
 
     let {
         class: className = "",
@@ -153,129 +154,33 @@
         [key: string]: unknown;
     } = $props();
 
+    // Every keyboard decision lives in the framework-free machine (shared/listbox-machine.ts, copied here by
+    // bin/sync-shared-modules); this component only reads the DOM and applies the transition it returns.
     function options(): HTMLElement[] {
         return ref ? Array.from(ref.querySelectorAll<HTMLElement>("[role='option']")) : [];
     }
 
-    // ---------------------------------------------------------------
-    // roving-focus (default, unchanged): real DOM focus per option, wraps.
-    // ---------------------------------------------------------------
-
-    function onRovingFocusKeydown(event: KeyboardEvent) {
-        const opts = options();
-        const current = document.activeElement as HTMLElement;
-        const index = opts.indexOf(current);
-        switch (event.key) {
-            case "ArrowDown": {
-                event.preventDefault();
-                const next = index < opts.length - 1 ? index + 1 : 0;
-                opts[next]?.focus();
-                break;
-            }
-            case "ArrowUp": {
-                event.preventDefault();
-                const prev = index > 0 ? index - 1 : opts.length - 1;
-                opts[prev]?.focus();
-                break;
-            }
-            case "Home": {
-                event.preventDefault();
-                opts[0]?.focus();
-                break;
-            }
-            case "End": {
-                event.preventDefault();
-                opts[opts.length - 1]?.focus();
-                break;
-            }
-        }
-    }
-
-    // ---------------------------------------------------------------
-    // active-descendant (opt-in): virtual cursor, clamp/wrap, typeahead, paging.
-    // ---------------------------------------------------------------
-
-    let typeaheadBuffer = "";
-    let typeaheadTimer: ReturnType<typeof setTimeout> | undefined;
-
-    function moveActive(delta: number) {
-        const count = options().length;
-        if (count === 0) return;
-        const next = activeIndex + delta;
-        activeIndex = clamp ? Math.min(Math.max(next, 0), count - 1) : ((next % count) + count) % count;
-    }
-
-    function runTypeahead(char: string) {
-        const opts = options();
-        if (opts.length === 0) return;
-        const lower = char.toLowerCase();
-        const sameCharRun = typeaheadBuffer === "" || [...typeaheadBuffer].every((c) => c === lower);
-        typeaheadBuffer += lower;
-        clearTimeout(typeaheadTimer);
-        typeaheadTimer = setTimeout(() => (typeaheadBuffer = ""), 500);
-        const query = sameCharRun ? lower : typeaheadBuffer;
-        const anchor = activeIndex < 0 ? 0 : activeIndex;
-        const start = sameCharRun ? anchor + 1 : anchor;
-        for (let n = 0; n < opts.length; n++) {
-            const i = (start + n) % opts.length;
-            if ((opts[i].textContent ?? "").trim().toLowerCase().startsWith(query)) {
-                activeIndex = i;
-                return;
-            }
-        }
-    }
-
-    function onActiveDescendantKeydown(event: KeyboardEvent) {
-        switch (event.key) {
-            case "ArrowDown":
-                event.preventDefault();
-                moveActive(1);
-                break;
-            case "ArrowUp":
-                event.preventDefault();
-                moveActive(-1);
-                break;
-            case "Home":
-                event.preventDefault();
-                activeIndex = options().length ? 0 : -1;
-                break;
-            case "End":
-                event.preventDefault();
-                activeIndex = options().length - 1;
-                break;
-            case "PageDown":
-                event.preventDefault();
-                moveActive(pageSize);
-                break;
-            case "PageUp":
-                event.preventDefault();
-                moveActive(-pageSize);
-                break;
-            case "Enter":
-            case " ":
-                event.preventDefault();
-                if (activeIndex >= 0) onActivate?.(activeIndex);
-                break;
-            case "Escape":
-                event.preventDefault();
-                onEscape?.();
-                break;
-            case "Tab":
-                // Not prevented: the consumer's onTabOut (e.g. moving focus to a
-                // trigger button) runs first, so the browser's default Tab
-                // proceeds from wherever focus ends up, not from this element.
-                onTabOut?.(event);
-                break;
-            default:
-                if (typeahead && event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey) {
-                    runTypeahead(event.key);
-                }
-        }
-    }
+    let typeaheadState = initialListboxState().typeahead;
 
     function onkeydown(event: KeyboardEvent) {
-        if (navigation === "active-descendant") onActiveDescendantKeydown(event);
-        else onRovingFocusKeydown(event);
+        const opts = options();
+        const t = listboxKeydown(
+            { activeIndex, typeahead: typeaheadState },
+            event,
+            {
+                labels: opts.map((option) => (option.textContent ?? "").trim()),
+                focusedIndex: opts.indexOf(document.activeElement as HTMLElement),
+                now: Date.now(),
+            },
+            { navigation, clamp, typeahead, pageSize },
+        );
+        typeaheadState = t.state.typeahead;
+        if (t.preventDefault) event.preventDefault();
+        if (t.focus !== undefined) opts[t.focus]?.focus();
+        if (t.setActiveIndex !== undefined) activeIndex = t.setActiveIndex;
+        if (t.activate !== undefined) onActivate?.(t.activate);
+        if (t.escape) onEscape?.();
+        if (t.tabOut) onTabOut?.(event); // never prevented: Tab proceeds from wherever onTabOut leaves focus
     }
 
     const activeId = $derived.by(() => {

package/dist/components/Listbox/listbox-machine.d.ts

@@ -0,0 +1,81 @@
+/**
+ * The listbox behaviour core: one framework-free transition function that every library's Listbox binds with a thin
+ * adapter (spec/competitive-position item 3). Pure, so the whole WAI-ARIA APG listbox keyboard contract is unit-tested
+ * without a browser.
+ *
+ * The adapter owns the DOM: it reads the options' labels and which option has focus, calls `listboxKeydown`, then
+ * applies the returned transition (prevent the default, move focus, set the active index, call the consumer's
+ * callbacks). The machine owns every decision.
+ *
+ * Two navigation models, as the Listbox components document them:
+ *
+ *   "roving-focus" (default): real focus moves between the options. ArrowDown/ArrowUp wrap; Home/End jump. No
+ *   typeahead, paging or activation.
+ *
+ *   "active-descendant": the root keeps focus and a virtual cursor (`activeIndex`) moves. ArrowDown/ArrowUp wrap, or
+ *   clamp when `clamp` is set; Home/End jump; PageUp/PageDown move by `pageSize`, wrapping or clamping like the
+ *   arrows; printable characters run typeahead when `typeahead` is set; Enter/Space activate the active option;
+ *   Escape and Tab are reported so the consumer decides what they do (Tab is never prevented).
+ *
+ * Selection is the consumer's: the machine reports activation and the consumer sets `aria-selected`. Disabled options
+ * are not skipped, matching the components this machine was extracted from.
+ */
+import { type TypeaheadState } from "./typeahead";
+export type ListboxNavigation = "roving-focus" | "active-descendant";
+/** Typeahead prefix lifetime: a pause this long starts a new prefix. The Listbox components have always used 500 ms. */
+export declare const LISTBOX_TYPEAHEAD_RESET_MS = 500;
+/** The component props the machine reads. Every field is optional and defaults as the components do. */
+export interface ListboxConfig {
+    navigation?: ListboxNavigation;
+    /** Arrows and paging clamp at the ends instead of wrapping (active-descendant only). */
+    clamp?: boolean;
+    /** Printable characters move the cursor (active-descendant only). */
+    typeahead?: boolean;
+    /** PageUp/PageDown step (active-descendant only). Default 10. */
+    pageSize?: number;
+    /** Typeahead reset pause in milliseconds. Default `LISTBOX_TYPEAHEAD_RESET_MS`. */
+    typeaheadResetMs?: number;
+}
+/** The machine's state: the virtual cursor (-1 = none) and the typeahead prefix. */
+export interface ListboxState {
+    activeIndex: number;
+    typeahead: TypeaheadState;
+}
+/** The parts of a keyboard event the machine reads. A DOM, React or Svelte KeyboardEvent fits. */
+export interface ListboxKey {
+    key: string;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+}
+/** What the adapter reads from the DOM at the moment of the key press. */
+export interface ListboxContext {
+    /** Each option's text, trimmed, in document order. Its length is the option count. */
+    labels: readonly string[];
+    /** The option that has real focus, or -1 (roving-focus only). */
+    focusedIndex?: number;
+    /** The time of the key press in milliseconds (for typeahead). */
+    now?: number;
+}
+/** What the adapter must do. Absent fields mean "nothing". */
+export interface ListboxTransition {
+    state: ListboxState;
+    /** Call `event.preventDefault()`. */
+    preventDefault: boolean;
+    /** Set the active index to this value (and notify the consumer), even when it is unchanged. */
+    setActiveIndex?: number;
+    /** Move real focus to the option at this index (roving-focus). */
+    focus?: number;
+    /** Call the consumer's onActivate with this index. */
+    activate?: number;
+    /** Call the consumer's onEscape. */
+    escape?: boolean;
+    /** Call the consumer's onTabOut, before the browser handles Tab. */
+    tabOut?: boolean;
+}
+/** A fresh state with the cursor at `activeIndex`. */
+export declare function initialListboxState(activeIndex?: number): ListboxState;
+/** `index` moved by `delta` among `count` options, clamped to the ends or wrapped. `count` must be positive. */
+export declare function stepListboxIndex(index: number, delta: number, count: number, clamp: boolean): number;
+/** The transition for one key press. Never mutates `state`. */
+export declare function listboxKeydown(state: ListboxState, event: ListboxKey, context: ListboxContext, config?: ListboxConfig): ListboxTransition;