@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

package/dist/components/Listbox/listbox-machine.js

@@ -0,0 +1,116 @@
+/**
+ * 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 { findTypeaheadMatch, isTypeaheadKey, nextTypeaheadState, } from "./typeahead";
+/** Typeahead prefix lifetime: a pause this long starts a new prefix. The Listbox components have always used 500 ms. */
+export const LISTBOX_TYPEAHEAD_RESET_MS = 500;
+/** A fresh state with the cursor at `activeIndex`. */
+export function initialListboxState(activeIndex = -1) {
+    return { activeIndex, typeahead: { prefix: "", at: 0 } };
+}
+/** `index` moved by `delta` among `count` options, clamped to the ends or wrapped. `count` must be positive. */
+export function stepListboxIndex(index, delta, count, clamp) {
+    const next = index + delta;
+    return clamp ? Math.min(Math.max(next, 0), count - 1) : ((next % count) + count) % count;
+}
+function rovingKeydown(state, key, count, focused) {
+    let focus;
+    switch (key) {
+        case "ArrowDown":
+            focus = focused < count - 1 ? focused + 1 : 0;
+            break;
+        case "ArrowUp":
+            focus = focused > 0 ? focused - 1 : count - 1;
+            break;
+        case "Home":
+            focus = 0;
+            break;
+        case "End":
+            focus = count - 1;
+            break;
+        default:
+            return { state, preventDefault: false };
+    }
+    return count > 0 ? { state, preventDefault: true, focus } : { state, preventDefault: true };
+}
+function activeDescendantKeydown(state, event, context, config) {
+    const { labels } = context;
+    const count = labels.length;
+    const clamp = config.clamp ?? false;
+    const move = (delta) => {
+        if (count === 0)
+            return { state, preventDefault: true };
+        const activeIndex = stepListboxIndex(state.activeIndex, delta, count, clamp);
+        return {
+            state: { ...state, activeIndex },
+            preventDefault: true,
+            setActiveIndex: activeIndex,
+        };
+    };
+    const jump = (activeIndex) => ({
+        state: { ...state, activeIndex },
+        preventDefault: true,
+        setActiveIndex: activeIndex,
+    });
+    const pageSize = config.pageSize ?? 10;
+    switch (event.key) {
+        case "ArrowDown":
+            return move(1);
+        case "ArrowUp":
+            return move(-1);
+        case "Home":
+            return jump(count ? 0 : -1);
+        case "End":
+            return jump(count - 1);
+        case "PageDown":
+            return move(pageSize);
+        case "PageUp":
+            return move(-pageSize);
+        case "Enter":
+        case " ":
+            return state.activeIndex >= 0
+                ? { state, preventDefault: true, activate: state.activeIndex }
+                : { state, preventDefault: true };
+        case "Escape":
+            return { state, preventDefault: true, escape: true };
+        case "Tab":
+            return { state, preventDefault: false, tabOut: true };
+    }
+    if (!config.typeahead || !isTypeaheadKey(event) || count === 0)
+        return { state, preventDefault: false };
+    const typeahead = nextTypeaheadState(state.typeahead, event.key, context.now ?? 0, config.typeaheadResetMs ?? LISTBOX_TYPEAHEAD_RESET_MS);
+    const match = findTypeaheadMatch(labels, state.activeIndex < 0 ? 0 : state.activeIndex, typeahead.prefix);
+    if (match < 0)
+        return { state: { ...state, typeahead }, preventDefault: false };
+    return {
+        state: { activeIndex: match, typeahead },
+        preventDefault: false,
+        setActiveIndex: match,
+    };
+}
+/** The transition for one key press. Never mutates `state`. */
+export function listboxKeydown(state, event, context, config = {}) {
+    if ((config.navigation ?? "roving-focus") === "active-descendant") {
+        return activeDescendantKeydown(state, event, context, config);
+    }
+    return rovingKeydown(state, event.key, context.labels.length, context.focusedIndex ?? -1);
+}

package/dist/components/Listbox/search-text.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Search matching shared by the data grid, kanban board, Gantt chart and calendar: pure, so it is unit-tested without a browser.
+ *
+ * A query is split on whitespace into terms; every term must appear (AND), in any order, ignoring case and diacritics
+ * ("cafe" finds "Café"). An empty query matches everything.
+ */
+/** Lower-case and strip combining marks, so matching ignores case and diacritics. */
+export declare function foldText(text: string): string;
+/** The terms of a query, folded; empty when the query is blank. */
+export declare function searchTerms(query: string): string[];
+/** True when every term of `query` appears in `text`. */
+export declare function matchesSearch(text: string, query: string): boolean;
+export type SearchSegment = {
+    text: string;
+    match: boolean;
+};
+/**
+ * `text` cut into runs, marking the parts any term matches (for `<mark>`). Folding can change a string's length (a precomposed "é"
+ * is one character, its folded form too, but a ligature may not be), so matching works on a per-character fold and falls back to
+ * one unmarked segment if the two ever disagree.
+ */
+export declare function highlightSegments(text: string, query: string): SearchSegment[];

package/dist/components/Listbox/search-text.js

@@ -0,0 +1,56 @@
+/**
+ * Search matching shared by the data grid, kanban board, Gantt chart and calendar: pure, so it is unit-tested without a browser.
+ *
+ * A query is split on whitespace into terms; every term must appear (AND), in any order, ignoring case and diacritics
+ * ("cafe" finds "Café"). An empty query matches everything.
+ */
+/** Lower-case and strip combining marks, so matching ignores case and diacritics. */
+export function foldText(text) {
+    return text
+        .normalize("NFD")
+        .replace(/\p{M}+/gu, "")
+        .toLowerCase();
+}
+/** The terms of a query, folded; empty when the query is blank. */
+export function searchTerms(query) {
+    return foldText(query).split(/\s+/).filter(Boolean);
+}
+/** True when every term of `query` appears in `text`. */
+export function matchesSearch(text, query) {
+    const terms = searchTerms(query);
+    if (terms.length === 0)
+        return true;
+    const folded = foldText(text);
+    return terms.every((term) => folded.includes(term));
+}
+/**
+ * `text` cut into runs, marking the parts any term matches (for `<mark>`). Folding can change a string's length (a precomposed "é"
+ * is one character, its folded form too, but a ligature may not be), so matching works on a per-character fold and falls back to
+ * one unmarked segment if the two ever disagree.
+ */
+export function highlightSegments(text, query) {
+    const terms = searchTerms(query);
+    if (terms.length === 0 || text === "")
+        return [{ text, match: false }];
+    const chars = Array.from(text);
+    const folded = chars.map((c) => foldText(c));
+    if (folded.some((f) => f.length !== 1))
+        return [{ text, match: false }];
+    const flat = folded.join("");
+    const marked = new Array(chars.length).fill(false);
+    for (const term of terms) {
+        for (let at = flat.indexOf(term); at !== -1; at = flat.indexOf(term, at + 1)) {
+            for (let i = at; i < at + term.length; i++)
+                marked[i] = true;
+        }
+    }
+    const out = [];
+    chars.forEach((c, i) => {
+        const last = out[out.length - 1];
+        if (last && last.match === marked[i])
+            last.text += c;
+        else
+            out.push({ text: c, match: marked[i] });
+    });
+    return out;
+}

package/dist/components/Listbox/typeahead.d.ts

@@ -0,0 +1,19 @@
+export declare const TYPEAHEAD_RESET_MS = 700;
+export type TypeaheadState = {
+    prefix: string;
+    at: number;
+};
+/** Whether a key press is a type-ahead character: one printable character, no Ctrl, Alt or Meta. */
+export declare function isTypeaheadKey(event: {
+    key: string;
+    ctrlKey?: boolean;
+    altKey?: boolean;
+    metaKey?: boolean;
+}): boolean;
+/** The prefix after `key` is pressed at time `now`: it grows while presses are within `resetMs` of each other, else starts over. */
+export declare function nextTypeaheadState(previous: TypeaheadState, key: string, now: number, resetMs?: number): TypeaheadState;
+/**
+ * The index of the row to move to, or -1. Searches from the row after `from` and wraps. A prefix of one repeated letter ("ss") is
+ * treated as that single letter, so pressing it again steps through the rows starting with it.
+ */
+export declare function findTypeaheadMatch(labels: readonly string[], from: number, prefix: string): number;

package/dist/components/Listbox/typeahead.js

@@ -0,0 +1,39 @@
+/**
+ * Type-ahead for grids: typing letters moves to the next row whose label starts with them. Pure, so it is unit-tested without a browser.
+ * The WAI-ARIA APG listbox / tree model: the letters typed in quick succession form one prefix; the prefix resets after a pause; the same
+ * letter pressed again cycles through the rows that start with it.
+ */
+import { foldText } from "./search-text";
+export const TYPEAHEAD_RESET_MS = 700;
+/** Whether a key press is a type-ahead character: one printable character, no Ctrl, Alt or Meta. */
+export function isTypeaheadKey(event) {
+    return (event.key.length === 1 &&
+        event.key !== " " &&
+        !event.ctrlKey &&
+        !event.altKey &&
+        !event.metaKey);
+}
+/** The prefix after `key` is pressed at time `now`: it grows while presses are within `resetMs` of each other, else starts over. */
+export function nextTypeaheadState(previous, key, now, resetMs = TYPEAHEAD_RESET_MS) {
+    const continuing = previous.prefix !== "" && now - previous.at <= resetMs;
+    return { prefix: (continuing ? previous.prefix : "") + key, at: now };
+}
+/**
+ * The index of the row to move to, or -1. Searches from the row after `from` and wraps. A prefix of one repeated letter ("ss") is
+ * treated as that single letter, so pressing it again steps through the rows starting with it.
+ */
+export function findTypeaheadMatch(labels, from, prefix) {
+    const folded = foldText(prefix);
+    if (folded === "" || labels.length === 0)
+        return -1;
+    const repeated = folded.length > 1 && [...folded].every((c) => c === folded[0]);
+    const needle = repeated ? folded[0] : folded;
+    // A growing prefix ("de") may keep the current row; a single letter, or a repeated one, must move on.
+    const startOffset = needle.length > 1 ? 0 : 1;
+    for (let step = 0; step < labels.length; step++) {
+        const index = (from + startOffset + step + labels.length) % labels.length;
+        if (foldText(labels[index]).startsWith(needle))
+            return index;
+    }
+    return -1;
+}

package/dist/components/Loading/Loading.svelte

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

package/dist/components/MalaysiaKadPengenalanInput/MalaysiaKadPengenalanInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // MalaysiaKadPengenalanInput component
+    //
+    // A headless input for entering Malaysia's MyKad Number (NRIC).
+    // Format: Twelve digits, usually written YYMMDD-PB-NNNG: the date of birth (year, month, day), a two-digit code for the place of birth (a state or a country), and a four-digit serial whose last digit is odd for a male and even for a female. There is no check digit.
+    //
+    // 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:
+    //   <MalaysiaKadPengenalanInput label="MyKad Number (NRIC)" 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/MyKad
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MalaysiaKadPengenalanInput.svelte -->
+<input
+    class={`malaysia-kad-pengenalan-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/MalaysiaKadPengenalanView/MalaysiaKadPengenalanView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // MalaysiaKadPengenalanView component
+    //
+    // A headless display component for showing Malaysia's
+    // MyKad Number (NRIC) in a read-only format.
+    // Format: Twelve digits, usually written YYMMDD-PB-NNNG: the date of birth (year, month, day), a two-digit code for the place of birth (a state or a country), and a four-digit serial whose last digit is odd for a male and even for a female. There is no check digit.
+    //
+    // 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:
+    //   <MalaysiaKadPengenalanView label="MyKad Number (NRIC)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/MyKad
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MalaysiaKadPengenalanView.svelte -->
+<span
+    class={`malaysia-kad-pengenalan-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Mark/Mark.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;
@@ -20,7 +19,6 @@
 <!-- Mark.svelte -->
 <mark
     class={`mark ${className}`}
-
     {...restProps}
 >
     {@render children?.()}

package/dist/components/MentionsInput/MentionsInput.svelte

@@ -24,7 +24,8 @@
     //
     // Accessibility:
     //   - <input role="combobox"> with aria-haspopup="listbox", aria-expanded,
-    //     aria-autocomplete="list", aria-label.
+    //     aria-autocomplete="list", aria-label, and aria-controls pointing at the
+    //     suggestions panel's generated id.
     //
     // Internationalization:
     //   - label, placeholder, triggerChar all come through props.
@@ -39,6 +40,8 @@
 
     import type { Snippet } from "svelte";
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         label,
@@ -71,6 +74,9 @@
         children?: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    const uid = $props.id();
+    const suggestionsId = `${uid}-suggestions`;
 </script>
 
 <!-- MentionsInput.svelte -->
@@ -85,6 +91,7 @@
         role="combobox"
         aria-label={label}
         aria-haspopup="listbox"
+        aria-controls={suggestionsId}
         aria-expanded={expanded}
         aria-autocomplete="list"
         {value}
@@ -92,7 +99,12 @@
         {disabled}
         {oninput}
     />
-    <div class="mentions-input-suggestions" hidden={!expanded}>
+    <div
+        class="mentions-input-suggestions"
+        id={suggestionsId}
+        popover="manual"
+        use:popoverState={expanded}
+    >
         {#if children}{@render children?.()}{/if}
     </div>
 </div>

package/dist/components/Menu/Menu.svelte

@@ -78,9 +78,7 @@
 
     function onkeydown(event: KeyboardEvent) {
         if (!menuRef) return;
-        const items = Array.from(
-            menuRef.querySelectorAll<HTMLElement>("[role='menuitem']"),
-        );
+        const items = Array.from(menuRef.querySelectorAll<HTMLElement>("[role='menuitem']"));
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);
         switch (event.key) {

package/dist/components/MenuBar/MenuBar.svelte

@@ -70,9 +70,7 @@
 
     function onkeydown(event: KeyboardEvent) {
         if (!barRef) return;
-        const items = Array.from(
-            barRef.querySelectorAll<HTMLElement>("[role='menuitem']"),
-        );
+        const items = Array.from(barRef.querySelectorAll<HTMLElement>("[role='menuitem']"));
         const current = document.activeElement as HTMLElement;
         const index = items.indexOf(current);
         switch (event.key) {

package/dist/components/MenuGroup/MenuGroup.svelte

@@ -52,7 +52,12 @@
     aria-label={label}
     {...restProps}
 >
-    <div class="menu-group-heading" aria-hidden="true">{label}</div>
+    <div
+        class="menu-group-heading"
+        aria-hidden="true"
+    >
+        {label}
+    </div>
     {#if children}
         {@render children?.()}
     {/if}

package/dist/components/MiddleTruncation/MiddleTruncation.svelte

@@ -72,13 +72,19 @@
         const style = getComputedStyle(root);
         context.font = `${style.fontStyle} ${style.fontWeight} ${style.fontSize} ${style.fontFamily}`;
         const ctx = context;
-        const result = truncateMiddle(text, { ellipsis, strategy, end, maxWidth: width, measure: (s) => ctx.measureText(s).width });
+        const result = truncateMiddle(text, {
+            ellipsis,
+            strategy,
+            end,
+            maxWidth: width,
+            measure: (s) => ctx.measureText(s).width,
+        });
         shown = result === text ? null : result;
     }
 
     // Re-measure whenever the text or the options change.
     $effect(() => {
-        text; ellipsis; strategy; end;
+        void [text, ellipsis, strategy, end]; // read so the effect tracks them
         recalculate();
     });
 
@@ -105,4 +111,8 @@
     data-strategy={strategy}
     data-truncated={shown === null ? undefined : ""}
     {...restProps}
-><span class="middle-truncation-visual" aria-hidden="true">{displayed}</span><span class="middle-truncation-full">{text}</span></span>
+    ><span
+        class="middle-truncation-visual"
+        aria-hidden="true">{displayed}</span
+    ><span class="middle-truncation-full">{text}</span></span
+>

package/dist/components/MockupBrowser/MockupBrowser.svelte

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

package/dist/components/MockupLaptop/MockupLaptop.svelte

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

package/dist/components/MockupPhonePortrait/MockupPhonePortrait.svelte

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

package/dist/components/MockupShell/MockupShell.svelte

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

package/dist/components/MockupTabletLandscape/MockupTabletLandscape.svelte

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

package/dist/components/MockupTabletPortrait/MockupTabletPortrait.svelte

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

package/dist/components/MockupWatch/MockupWatch.svelte

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

package/dist/components/MockupWindow/MockupWindow.svelte

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

package/dist/components/MutuallyExclusive/MutuallyExclusive.svelte

@@ -16,7 +16,6 @@
 <!-- MutuallyExclusive.svelte -->
 <fieldset
     class={`mutually-exclusive ${className}`}
-
     aria-label={label}
     {...restProps}
 >