@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

package/CHANGELOG.md

@@ -3,6 +3,11 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+
+## 0.6.2 — 2026-11-03
+
+- Fixed: the published barrel now exports every component in the catalog (recent components were missing). Dependencies updated within range (Svelte 5.57.3).
+
 ## 0.6.0 — 2026-10-23 (three components)
 
 - New: `HeatmapChartWithYearOfDays`, `MiddleTruncation`, `WheelPicker`.
@@ -114,7 +119,7 @@ Metadata-only patch; no code change. Ships the corrected package
 metadata to the registry:
 
 - `license` is the project SPDX menu (`MIT OR Apache-2.0 OR
-  GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause`), replacing the
+GPL-2.0-only OR GPL-3.0-only OR BSD-3-Clause`), replacing the
   single-license field that contradicted the repository's LICENSE.md.
 - `repository`, `homepage`, and `bugs` point at the LilyDesignSystem
   organisation and the documentation site.

package/LICENSE.md

@@ -8,15 +8,15 @@ Lily Design System™ is free open source software.
 
 License is any of these, at your option, or contact us for custom license options.
 
-* [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
+- [MIT](https://opensource.org/license/mit) ([SPDX: MIT](https://spdx.org/licenses/MIT.html))
 
-* [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
+- [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0) ([SPDX: Apache-2.0](https://spdx.org/licenses/Apache-2.0.html))
 
-* [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
+- [GNU General Public License v2.0](https://www.gnu.org/licenses/old-licenses/gpl-2.0-standalone.html) ([SPDX: GPL-2.0-only](https://spdx.org/licenses/GPL-2.0-only.html))
 
-* [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
+- [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0-standalone.html) ([SPDX: GPL-3.0-only](https://spdx.org/licenses/GPL-3.0-only.html))
 
-* [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
+- [BSD 3-Clause License](https://opensource.org/license/bsd-3-clause) ([SPDX: BSD-3-Clause](https://spdx.org/licenses/BSD-3-Clause.html))
 
 ## SPDX
 
@@ -31,9 +31,9 @@ single identifier from the list where the packaging format does not accept a
 disjunction. You do not need permission to pick one: choose whichever member of
 the list suits your project and comply with that one.
 
-This applies to the whole repository — the component catalog, the seven headless
-libraries, the seven example applications, the seven helper catalogs, the
-`themes/` stylesheets, the `bin/` tooling, and the documentation.
+This applies to the whole repository — the component catalog, the headless
+libraries, the example applications, the helper packages, the `themes/`
+stylesheets, the `bin/` tooling, and the documentation.
 
 ## Scope note
 

package/README.md

@@ -1,6 +1,6 @@
 # Lily Design System™ - Svelte Headless
 
-A headless Svelte 5 component library with 490 components. All components are headless (no built-in styles), fully accessible (WCAG 2.2 AAA), and use Svelte 5 runes.
+A headless Svelte 5 component library with 607 components. All components are headless (no built-in styles), fully accessible (WCAG 2.2 AAA), and use Svelte 5 runes.
 
 ## Components
 
@@ -394,7 +394,7 @@ A headless Svelte 5 component library with 490 components. All components are he
 | table-body | `<tbody>`    |
 | table-foot | `<tfoot>`    |
 | table-row  | `<tr>`       |
-| table-td | `<td>`       |
+| table-td   | `<td>`       |
 | select     | `<select>`   |
 | span       | `<span>`     |
 
@@ -422,7 +422,7 @@ All components follow WCAG 2.2 AAA guidelines:
 
 - **Semantic HTML**: Proper element usage (`<button>`, `<nav>`, `<dialog>`, etc.)
 - **ARIA attributes**: Roles, labels, states, and properties
-- **Keyboard navigation**: Full keyboard support for all interactive components
+- **Keyboard**: native elements are keyboard-operable by default; about 34 components add APG key handling (arrows, Home/End, Escape, type-ahead) — see each component's `AGENTS.md`
 - **Screen readers**: Proper announcements via aria-live, role="alert", etc.
 - **Focus management**: Logical focus order and visible focus indicators
 - **Error handling**: Accessible error messages linked via aria-errormessage
@@ -433,7 +433,7 @@ No strings are hardcoded in any component. All user-facing text comes through pr
 
 ## Related Projects
 
-- [Lily Design System](https://github.com/LilyDesignSystem/lily) — Parent project
+- [Lily Design System](https://github.com/LilyDesignSystem/lily-design-system) — Parent project
 - [Svelte SvelteKit Examples](../lily-design-system-svelte-sveltekit-examples/) — Example app with simple styling
 - [React Headless](../lily-design-system-react-headless/) — React equivalent
 - [Vue Headless](../lily-design-system-vue-headless/) — Vue equivalent

package/dist/components/AccordionLink/AccordionLink.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>
 
 <!-- AccordionLink.svelte -->
-<div class={`accordion-link ${className}`} aria-label={label} {...restProps}>
+<a
+    class={`accordion-link ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</a>

package/dist/components/AccordionLink/AccordionLink.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/ActionBar/ActionBar.svelte

@@ -90,7 +90,7 @@
             class="action-bar-clear"
             type="button"
             aria-label={clearSelectionLabel}
-            onclick={onClearSelection}
-        >×</button>
+            onclick={onClearSelection}>×</button
+        >
     {/if}
 </div>

package/dist/components/ActionGroup/ActionGroup.svelte

@@ -33,11 +33,12 @@
     //   - Adobe Spectrum ActionGroup: https://spectrum.adobe.com/page/action-group/
 
     import type { Snippet } from "svelte";
+    import { popoverState, popoverSupported, toggleOpened } from "../Popover/popover.js";
 
     let {
         class: className = "",
         label,
-        overflowOpen = false,
+        overflowOpen = $bindable(false),
         overflowLabel = undefined,
         onOverflowToggle = undefined,
         children = undefined,
@@ -47,18 +48,30 @@
         class?: string;
         /** Accessible label for the group (REQUIRED) */
         label: string;
-        /** Whether the overflow menu is open */
+        /** Whether the overflow menu is open. Bindable: the browser opens and light-dismisses it. */
         overflowOpen?: boolean;
         /** Accessible label for the overflow trigger button */
         overflowLabel?: string;
-        /** Click handler for the overflow trigger */
-        onOverflowToggle?: () => void;
+        /** Click handler for the overflow trigger; call preventDefault() on the event to keep the menu as it is */
+        onOverflowToggle?: (event: MouseEvent) => void;
         /** Visible action buttons */
         children?: Snippet;
         /** Overflow menu content */
         overflow?: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    const uid = $props.id();
+    const menuId = `action-group-overflow-menu-${uid}`;
+    let menu: HTMLDivElement | undefined = $state();
+
+    // With the Popover API the trigger's command="toggle-popover" opens and closes the menu and the toggle event
+    // writes `overflowOpen` back; without it, the click toggles `overflowOpen` and popoverState sets `hidden`.
+    function toggle(event: MouseEvent) {
+        onOverflowToggle?.(event);
+        if (event.defaultPrevented) return;
+        if (menu && !popoverSupported(menu)) overflowOpen = !overflowOpen;
+    }
 </script>
 
 <!-- ActionGroup.svelte -->
@@ -78,9 +91,20 @@
             aria-haspopup="menu"
             aria-expanded={overflowOpen}
             aria-label={overflowLabel}
-            onclick={onOverflowToggle}
-        >…</button>
-        <div class="action-group-overflow-menu" hidden={!overflowOpen}>
+            aria-controls={menuId}
+            command="toggle-popover"
+            commandfor={menuId}
+            popovertarget={menuId}
+            onclick={toggle}>…</button
+        >
+        <div
+            bind:this={menu}
+            class="action-group-overflow-menu"
+            id={menuId}
+            popover="auto"
+            use:popoverState={overflowOpen}
+            ontoggle={(event) => (overflowOpen = toggleOpened(event))}
+        >
             {@render overflow()}
         </div>
     {/if}

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

@@ -3,18 +3,18 @@ type $$ComponentProps = {
     class?: string;
     /** Accessible label for the group (REQUIRED) */
     label: string;
-    /** Whether the overflow menu is open */
+    /** Whether the overflow menu is open. Bindable: the browser opens and light-dismisses it. */
     overflowOpen?: boolean;
     /** Accessible label for the overflow trigger button */
     overflowLabel?: string;
-    /** Click handler for the overflow trigger */
-    onOverflowToggle?: () => void;
+    /** Click handler for the overflow trigger; call preventDefault() on the event to keep the menu as it is */
+    onOverflowToggle?: (event: MouseEvent) => void;
     /** Visible action buttons */
     children?: Snippet;
     /** Overflow menu content */
     overflow?: Snippet;
     [key: string]: unknown;
 };
-declare const ActionGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ActionGroup: import("svelte").Component<$$ComponentProps, {}, "overflowOpen">;
 type ActionGroup = ReturnType<typeof ActionGroup>;
 export default ActionGroup;

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
@@ -65,6 +64,7 @@
     //   - WAI-ARIA Alert and Message Dialogs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 
     import type { Snippet } from "svelte";
+    import { modalDialog } from "../Dialog/modal.js";
 
     let {
         class: className = "",
@@ -95,7 +95,12 @@
 {#if open}
     <dialog
         class={`alert-dialog ${className}`}
-        open
+        use:modalDialog={true}
+        oncancel={(event) => {
+            event.preventDefault();
+            open = false;
+        }}
+        onclose={() => (open = false)}
         role="alertdialog"
         aria-labelledby={titleId}
         aria-describedby={description ? descriptionId : undefined}

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;