@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/AddressographBox/AddressographBox.svelte

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

package/dist/components/AiLabel/AiLabel.svelte

@@ -55,5 +55,5 @@
 <span
     class={`ai-label ${className}`}
     aria-label={label}
-    {...restProps}
->{text}</span>
+    {...restProps}>{text}</span
+>

package/dist/components/Alert/Alert.svelte

@@ -89,9 +89,7 @@
     } = $props();
 
     // Default aria-live based on role if not explicitly set
-    let ariaLive = $derived(
-        live ?? (role === "alert" ? "assertive" : "polite"),
-    );
+    let ariaLive = $derived(live ?? (role === "alert" ? "assertive" : "polite"));
 </script>
 
 <!-- Alert.svelte -->

package/dist/components/AlertDialog/AlertDialog.svelte

@@ -38,8 +38,8 @@
     //   </AlertDialog>
     //
     // Keyboard:
-    //   - Escape: Consumer must implement via onkeydown to close the dialog
-    //   - Tab: Consumer should implement focus trapping within the dialog
+    //   - Escape: closes the dialog (showModal(): the browser fires cancel; the component sets open to false)
+    //   - Tab: stays inside the dialog (the browser traps it while the dialog is modal)
     //
     // Accessibility:
     //   - role="alertdialog" signals critical content requiring acknowledgment
@@ -55,7 +55,6 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles — consumer provides all styling
-    //   - Consumer is responsible for focus trapping and Escape key handling
     //   - The open prop must use $bindable() for two-way binding
     //   - Do not use heading elements; use <p><strong> for the title
     //   - Distinct from Dialog: use AlertDialog only for critical messages

package/dist/components/Answer/Answer.svelte

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

package/dist/components/AreaChart/AreaChart.svelte

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

package/dist/components/AsSaudiyahRaqmAlHuwiyahAlWataniyahInput/AsSaudiyahRaqmAlHuwiyahAlWataniyahInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // AsSaudiyahRaqmAlHuwiyahAlWataniyahInput component
+    //
+    // A headless input for entering Saudi Arabia's National Identification Number.
+    // Format: Ten digits. The first digit is 1 for a Saudi citizen and 2 for a resident (the iqama number), and the last digit is a check digit under the Luhn algorithm: counting from the right, every second digit is doubled (subtracting 9 when the result exceeds 9), and the total must be a multiple of 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:
+    //   <AsSaudiyahRaqmAlHuwiyahAlWataniyahInput label="National Identification 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/National_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>
+
+<!-- AsSaudiyahRaqmAlHuwiyahAlWataniyahInput.svelte -->
+<input
+    class={`as-saudiyah-raqm-al-huwiyah-al-wataniyah-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/AsSaudiyahRaqmAlHuwiyahAlWataniyahView/AsSaudiyahRaqmAlHuwiyahAlWataniyahView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // AsSaudiyahRaqmAlHuwiyahAlWataniyahView component
+    //
+    // A headless display component for showing Saudi Arabia's
+    // National Identification Number in a read-only format.
+    // Format: Ten digits. The first digit is 1 for a Saudi citizen and 2 for a resident (the iqama number), and the last digit is a check digit under the Luhn algorithm: counting from the right, every second digit is doubled (subtracting 9 when the result exceeds 9), and the total must be a multiple of 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:
+    //   <AsSaudiyahRaqmAlHuwiyahAlWataniyahView label="National Identification Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AsSaudiyahRaqmAlHuwiyahAlWataniyahView.svelte -->
+<span
+    class={`as-saudiyah-raqm-al-huwiyah-al-wataniyah-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/AustraliaTaxFileNumberInput/AustraliaTaxFileNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // AustraliaTaxFileNumberInput component
+    //
+    // A headless input for entering Australia's Tax File Number (TFN).
+    // Format: Nine digits, written 123 456 782 (older numbers have eight). The digits are multiplied by the weights 1,4,3,7,5,8,6,9,10 and summed, and the sum must be a multiple of 11.
+    //
+    // 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:
+    //   <AustraliaTaxFileNumberInput label="Tax File Number (TFN)" 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/Tax_file_number
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AustraliaTaxFileNumberInput.svelte -->
+<input
+    class={`australia-tax-file-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/AustraliaTaxFileNumberView/AustraliaTaxFileNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // AustraliaTaxFileNumberView component
+    //
+    // A headless display component for showing Australia's
+    // Tax File Number (TFN) in a read-only format.
+    // Format: Nine digits, written 123 456 782 (older numbers have eight). The digits are multiplied by the weights 1,4,3,7,5,8,6,9,10 and summed, and the sum must be a multiple of 11.
+    //
+    // 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:
+    //   <AustraliaTaxFileNumberView label="Tax File Number (TFN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Tax_file_number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AustraliaTaxFileNumberView.svelte -->
+<span
+    class={`australia-tax-file-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Autosuggest/Autosuggest.svelte

@@ -1,24 +1,191 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    // Autosuggest component
+    //
+    // A text input that proposes matching options as users type: the WAI-ARIA
+    // combobox pattern with list autocomplete. The input is the combobox; the
+    // suggestions are a listbox of options. The consumer computes the
+    // suggestions in onInput (filtering, fetching) and passes them back in
+    // `suggestions`; the component owns the open state, the highlight, the keys
+    // and the selection.
+    //
+    // Props:
+    //   class — string, optional. Appended to the root's class list.
+    //   label — string, required. Accessible name of the input and the listbox.
+    //   value — string, default "". Bindable. The input's text.
+    //   suggestions — { value: string; label: string }[], default []. The options to show.
+    //   onInput — (query: string) => void, optional. Called as the user types.
+    //   onSelect — (value: string) => void, optional. Called when a suggestion is chosen.
+    //   placeholder — string, optional. Placeholder text.
+    //   name — string, optional. Form field name of the input.
+    //   ...restProps — additional HTML attributes spread onto the root <div>.
+    //
+    // Syntax:
+    //   <Autosuggest label="Country" bind:value {suggestions} onInput={search} />
+    //
+    // Keyboard:
+    //   - ArrowDown: open the list / highlight the next option (wraps)
+    //   - ArrowUp: open the list / highlight the previous option (wraps)
+    //   - Home / End: highlight the first / last option while the list is open
+    //   - Enter: choose the highlighted option
+    //   - Escape: close the list without choosing
+    //
+    // Accessibility:
+    //   - role="combobox" on the input, aria-autocomplete="list", aria-expanded,
+    //     aria-controls naming the listbox, aria-activedescendant naming the
+    //     highlighted option (which carries aria-selected="true")
+    //   - The list stays in the DOM, hidden while closed, so aria-controls always resolves
+    //
+    // Claude rules:
+    //   - Choosing an option writes its `value` into the input and closes the list
+    //   - The list opens only while there are suggestions; blur closes it
+    //   - Pressing on an option does not blur the input, so a click can choose it
+    //   - A form reset restores the starting text (defaultValue + bind:value)
+    //
+    // References:
+    //   - WAI-ARIA APG combobox pattern: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+
+    import { untrack } from "svelte";
+
+    const uid = $props.id();
+    const listId = `autosuggest-list-${uid}`;
+    const optionId = (index: number) => `autosuggest-option-${uid}-${index}`;
 
     let {
         class: className = "",
-        label = undefined,
-        children,
+        label,
+        value = $bindable(""),
+        suggestions = [],
+        onInput = undefined,
+        onSelect = undefined,
+        placeholder = undefined,
+        name = undefined,
         ...restProps
     }: {
-        label?: string;
-        children: Snippet;
+        /** Accessible label. */
+        label: string;
+        /** The input's text. Bindable. */
+        value?: string;
+        /** The options to show. */
+        suggestions?: { value: string; label: string }[];
+        /** Called with the typed text. */
+        onInput?: (query: string) => void;
+        /** Called with the chosen suggestion's value. */
+        onSelect?: (value: string) => void;
+        /** Placeholder text. */
+        placeholder?: string;
+        /** Form field name. */
+        name?: string;
         [key: string]: unknown;
     } = $props();
+
+    // The starting text, which a form reset restores (bind:value reads defaultValue).
+    const initialValue = untrack(() => value);
+    let wanted = $state(false);
+    let active = $state(-1);
+    const open = $derived(wanted && suggestions.length > 0);
+
+    function choose(index: number) {
+        const suggestion = suggestions[index];
+        if (!suggestion) return;
+        value = suggestion.value;
+        wanted = false;
+        active = -1;
+        onSelect?.(suggestion.value);
+    }
+
+    function oninput(event: Event) {
+        value = (event.currentTarget as HTMLInputElement).value;
+        wanted = true;
+        active = -1;
+        onInput?.(value);
+    }
+
+    function onkeydown(event: KeyboardEvent) {
+        const count = suggestions.length;
+        switch (event.key) {
+            case "ArrowDown":
+                if (count === 0) return;
+                active = open ? (active + 1) % count : 0;
+                wanted = true;
+                break;
+            case "ArrowUp":
+                if (count === 0) return;
+                active = open && active > 0 ? active - 1 : count - 1;
+                wanted = true;
+                break;
+            case "Home":
+                if (!open) return;
+                active = 0;
+                break;
+            case "End":
+                if (!open) return;
+                active = count - 1;
+                break;
+            case "Enter":
+                if (!open || active < 0) return;
+                choose(active);
+                break;
+            case "Escape":
+                if (!open) return;
+                wanted = false;
+                active = -1;
+                break;
+            default:
+                return;
+        }
+        event.preventDefault();
+    }
+
+    function onblur() {
+        wanted = false;
+        active = -1;
+    }
 </script>
 
 <!-- Autosuggest.svelte -->
 <div
     class={`autosuggest ${className}`}
-    role="combobox"
-    aria-label={label}
     {...restProps}
 >
-    {@render children?.()}
+    <input
+        class="autosuggest-input"
+        type="text"
+        role="combobox"
+        autocomplete="off"
+        aria-label={label}
+        aria-autocomplete="list"
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-activedescendant={open && active >= 0 ? optionId(active) : undefined}
+        {placeholder}
+        {name}
+        bind:value
+        defaultValue={initialValue}
+        {oninput}
+        {onkeydown}
+        {onblur}
+    />
+    <!-- svelte-ignore a11y_no_noninteractive_element_interactions (keeps focus in the input while an option is pressed) -->
+    <ul
+        class="autosuggest-list"
+        role="listbox"
+        id={listId}
+        aria-label={label}
+        hidden={!open}
+        onmousedown={(event) => event.preventDefault()}
+    >
+        {#each suggestions as suggestion, index (suggestion.value)}
+            <!-- svelte-ignore a11y_click_events_have_key_events (the input owns the keys) -->
+            <li
+                class="autosuggest-option"
+                role="option"
+                id={optionId(index)}
+                aria-selected={index === active}
+                data-value={suggestion.value}
+                onclick={() => choose(index)}
+            >
+                {suggestion.label}
+            </li>
+        {/each}
+    </ul>
 </div>

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

@@ -1,9 +1,23 @@
-import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    label?: string;
-    children: Snippet;
+    /** Accessible label. */
+    label: string;
+    /** The input's text. Bindable. */
+    value?: string;
+    /** The options to show. */
+    suggestions?: {
+        value: string;
+        label: string;
+    }[];
+    /** Called with the typed text. */
+    onInput?: (query: string) => void;
+    /** Called with the chosen suggestion's value. */
+    onSelect?: (value: string) => void;
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Form field name. */
+    name?: string;
     [key: string]: unknown;
 };
-declare const Autosuggest: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Autosuggest: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Autosuggest = ReturnType<typeof Autosuggest>;
 export default Autosuggest;

package/dist/components/AvatarGroup/AvatarGroup.svelte

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

package/dist/components/BarChart/BarChart.svelte

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

package/dist/components/BarcodeImage/BarcodeImage.svelte

@@ -14,4 +14,10 @@
 </script>
 
 <!-- BarcodeImage.svelte -->
-<img class={`barcode-image ${className}`} {src} {alt} {loading} {...restProps} />
+<img
+    class={`barcode-image ${className}`}
+    {src}
+    {alt}
+    {loading}
+    {...restProps}
+/>

package/dist/components/BreadcrumbLink/BreadcrumbLink.svelte

@@ -2,17 +2,27 @@
     import type { Snippet } from "svelte";
     let {
         class: className = "",
+        href,
         label = undefined,
         children,
         ...restProps
     }: {
+        /** The URL to navigate to. */
+        href: string;
+        /** Accessible label override for screen readers. */
         label?: string;
+        /** The link content. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- BreadcrumbLink.svelte -->
-<div class={`breadcrumb-link ${className}`} aria-label={label} {...restProps}>
+<a
+    class={`breadcrumb-link ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</a>

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

@@ -1,6 +1,10 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
+    /** The URL to navigate to. */
+    href: string;
+    /** Accessible label override for screen readers. */
     label?: string;
+    /** The link content. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/Byline/Byline.svelte

@@ -27,7 +27,10 @@
 </script>
 
 <!-- Byline.svelte -->
-<div class={`byline ${className}`} {...restProps}>
+<div
+    class={`byline ${className}`}
+    {...restProps}
+>
     <span class="byline-authors">{@render children?.()}</span>
     {#if published}
         <span class="byline-published">{@render published()}</span>

package/dist/components/CandlestickChart/CandlestickChart.svelte

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

package/dist/components/Caption/Caption.svelte

@@ -54,6 +54,7 @@
 </script>
 
 <!-- Caption.svelte -->
+<!-- svelte-ignore a11y_figcaption_parent (Caption is a figure part; the consumer places it inside their <figure>) -->
 <figcaption
     class={`caption ${className}`}
     {...restProps}