@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -26,7 +26,7 @@
     } = $props();
 
     let hasCaption = $derived(
-        title !== undefined || description !== undefined || notes !== undefined
+        title !== undefined || description !== undefined || notes !== undefined,
     );
 </script>
 

package/dist/components/Grid/Grid.svelte

@@ -8,6 +8,8 @@
     // Props:
     //   class — string, optional. CSS class appended to the base class.
     //   columns — number | string, default 12. Number of equal columns OR custom grid-template-columns.
+    //   minColumnWidth — string, optional. A CSS length (e.g. "12rem"). When set, as many columns fit as the
+    //     container allows, each at least this wide: repeat(auto-fit, minmax(min(<W>, 100%), 1fr)). Wins over `columns`.
     //   gap — string, default "1rem". Gap CSS value.
     //   children — Snippet, required. Grid items.
     //   ...restProps — additional HTML attributes spread onto the <div>.
@@ -33,6 +35,7 @@
     //   - Headless: only inline styles are grid behavior (display, template, gap)
     //   - When columns is a number, uses repeat(N, minmax(0, 1fr))
     //   - When columns is a string, uses it as-is
+    //   - When minColumnWidth is set it wins over columns (columns has a default, so "unset" cannot be detected)
     //
     // References:
     //   - MDN CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
@@ -42,12 +45,15 @@
     let {
         class: className = "",
         columns = 12,
+        minColumnWidth,
         gap = "1rem",
         children,
         ...restProps
     }: {
         /** Number of equal columns OR custom grid-template-columns string */
         columns?: number | string;
+        /** CSS length: fit as many columns as the container allows, each at least this wide. Wins over `columns`. */
+        minColumnWidth?: string;
         /** Gap CSS value */
         gap?: string;
         /** Grid items */
@@ -56,9 +62,11 @@
     } = $props();
 
     const templateColumns = $derived(
-        typeof columns === "number"
-            ? `repeat(${columns}, minmax(0, 1fr))`
-            : columns
+        minColumnWidth
+            ? `repeat(auto-fit, minmax(min(${minColumnWidth}, 100%), 1fr))`
+            : typeof columns === "number"
+              ? `repeat(${columns}, minmax(0, 1fr))`
+              : columns,
     );
 </script>
 
@@ -66,6 +74,7 @@
 <div
     class={`grid ${className}`}
     data-columns={String(columns)}
+    data-min-column-width={minColumnWidth || undefined}
     style={`display: grid; grid-template-columns: ${templateColumns}; gap: ${gap};`}
     {...restProps}
 >

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

@@ -2,6 +2,8 @@ import type { Snippet } from "svelte";
 type $$ComponentProps = {
     /** Number of equal columns OR custom grid-template-columns string */
     columns?: number | string;
+    /** CSS length: fit as many columns as the container allows, each at least this wide. Wins over `columns`. */
+    minColumnWidth?: string;
     /** Gap CSS value */
     gap?: string;
     /** Grid items */

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(() => {