@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/Drawer/Drawer.svelte

@@ -2,10 +2,12 @@
     // Drawer component
     //
     // A panel that slides in from an edge of the viewport, typically used for
-    // navigation menus, filters, or supplementary content. Renders conditionally
-    // based on the open state and uses role="dialog" with aria-modal="true" for
-    // proper screen reader behavior. The side prop indicates which edge via a
-    // data-side attribute for consumer positioning and animation styles.
+    // navigation menus, filters, or supplementary content. It is modal: while open
+    // it renders a native <dialog> opened with showModal() (see ../Dialog/modal.ts),
+    // so the browser puts it in the top layer, makes the page behind it inert,
+    // traps Tab inside it and, on close, focus returns to the element that opened
+    // it. The side prop indicates which edge via a data-side attribute for
+    // consumer positioning and animation styles.
     //
     // Props:
     //   className — string, optional. CSS class name.
@@ -13,7 +15,7 @@
     //   label — string, required. Accessible name for the drawer.
     //   side — "left" | "right" | "top" | "bottom", default "left". Edge the drawer enters from.
     //   children — Snippet, required. Drawer content.
-    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //   ...restProps — additional HTML attributes spread onto the <dialog>.
     //
     // Syntax:
     //   <Drawer label="Nav" bind:open side="left">Content</Drawer>
@@ -30,13 +32,15 @@
     //   </Drawer>
     //
     // Keyboard:
-    //   - Escape: closes the drawer by setting open to false
+    //   - Escape: closes the drawer by setting open to false (also the native cancel event)
+    //   - Tab: stays inside the drawer while it is open (showModal() makes the page inert)
     //
     // Accessibility:
-    //   - role="dialog" identifies the drawer as a dialog
+    //   - role="dialog" provided natively by the <dialog> element
     //   - aria-label provides the accessible name
-    //   - aria-modal="true" indicates the drawer is modal
-    //   - tabindex="-1" allows programmatic focus management
+    //   - aria-modal="true" is true: showModal() makes the rest of the page inert
+    //   - focus moves into the drawer on open and returns to the opener on close
+    //   - tabindex="-1" lets the drawer itself take focus when it has no focusable child
     //   - data-side attribute conveys position for consumer styling
     //
     // Internationalization:
@@ -46,12 +50,15 @@
     //   - Headless: no CSS, no styles — consumer provides all styling
     //   - Uses $bindable() on open for two-way state binding
     //   - Drawer is removed from DOM when open is false
+    //   - Opened with showModal() via ../Dialog/modal.ts; where showModal is missing (jsdom) it falls back to
+    //     the open attribute
     //   - Consumer uses data-side for positioning CSS
     //
     // References:
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
 
     import type { Snippet } from "svelte";
+    import { modalDialog } from "../Dialog/modal.js";
 
     let {
         class: className = "",
@@ -78,20 +85,36 @@
             open = false;
         }
     }
+    function oncancel(event: Event) {
+        event.preventDefault();
+        open = false;
+    }
+    function onclose() {
+        open = false;
+    }
+    // Open as a real modal, then make sure focus is inside: showModal() already moves it in a browser, the
+    // open-attribute fallback does not.
+    function modal(node: HTMLDialogElement) {
+        const action = modalDialog(node, true);
+        if (!node.contains(document.activeElement)) node.focus();
+        return action;
+    }
 </script>
 
 {#if open}
     <!-- Drawer.svelte -->
-    <div
+    <dialog
         class={`drawer ${className}`}
-        role="dialog"
         tabindex="-1"
         aria-label={label}
         aria-modal="true"
         data-side={side}
+        use:modal
         {onkeydown}
+        {oncancel}
+        {onclose}
         {...restProps}
     >
         {@render children?.()}
-    </div>
+    </dialog>
 {/if}

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -63,6 +63,7 @@
     //   - WAI-ARIA menuitem role: https://www.w3.org/TR/wai-aria-1.2/#menuitem
 
     import type { Snippet } from "svelte";
+    import { popoverState, popoverSupported, toggleOpened } from "../Popover/popover.js";
 
     let {
         class: className = "",
@@ -80,26 +81,27 @@
         [key: string]: unknown;
     } = $props();
 
+    const uid = $props.id();
+    const menuId = `dropdown-menu-${uid}`;
     let menuRef: HTMLElement | undefined = $state(undefined);
 
     // Focus the first menuitem when the menu opens.
     $effect(() => {
         if (open && menuRef) {
-            const first =
-                menuRef.querySelector<HTMLElement>("[role='menuitem']");
+            const first = menuRef.querySelector<HTMLElement>("[role='menuitem']");
             first?.focus();
         }
     });
 
+    // With the Popover API the trigger's command="toggle-popover" opens and closes the menu and the toggle event
+    // writes `open` back; without it, the click toggles `open` and popoverState sets `hidden`.
     function toggleMenu() {
-        open = !open;
+        if (menuRef && !popoverSupported(menuRef)) open = !open;
     }
 
     function onMenuKeydown(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);
 
@@ -145,18 +147,27 @@
         aria-haspopup="true"
         aria-expanded={open}
         aria-label={label}
+        aria-controls={menuId}
+        command="toggle-popover"
+        commandfor={menuId}
+        popovertarget={menuId}
         onclick={toggleMenu}
     >
         {label}
     </button>
-    {#if open}
-        <div
-            role="menu"
-            aria-label={label}
-            bind:this={menuRef}
-            onkeydown={onMenuKeydown}
-        >
-            {@render children?.()}
-        </div>
-    {/if}
+    <!-- popover="auto": top layer, light dismiss and Escape from the browser; the arrow-key focus movement over the
+         menu items has no native equivalent and stays here. -->
+    <!-- svelte-ignore a11y_interactive_supports_focus (the menu container is not a tab stop: items carry tabindex=-1 and onMenuKeydown moves focus to them) -->
+    <div
+        id={menuId}
+        role="menu"
+        aria-label={label}
+        popover="auto"
+        bind:this={menuRef}
+        use:popoverState={open}
+        ontoggle={(event) => (open = toggleOpened(event))}
+        onkeydown={onMenuKeydown}
+    >
+        {@render children?.()}
+    </div>
 </div>

package/dist/components/EcuadorCedulaDeIdentidadInput/EcuadorCedulaDeIdentidadInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // EcuadorCedulaDeIdentidadInput component
+    //
+    // A headless input for entering Ecuador's Cedula de Identidad Number.
+    // Format: Ten digits: a two-digit province code (01 to 24, or 30 for those born abroad), a third digit below 6 for a natural person, six more digits, and a check digit. The first nine digits are multiplied alternately by 2 and 1 (starting with 2), subtracting 9 from any product above 9, and the check digit brings the sum to the next 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:
+    //   <EcuadorCedulaDeIdentidadInput label="Cedula de Identidad 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/C%C3%A9dula_de_identidad
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EcuadorCedulaDeIdentidadInput.svelte -->
+<input
+    class={`ecuador-cedula-de-identidad-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/EcuadorCedulaDeIdentidadView/EcuadorCedulaDeIdentidadView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // EcuadorCedulaDeIdentidadView component
+    //
+    // A headless display component for showing Ecuador's
+    // Cedula de Identidad Number in a read-only format.
+    // Format: Ten digits: a two-digit province code (01 to 24, or 30 for those born abroad), a third digit below 6 for a natural person, six more digits, and a check digit. The first nine digits are multiplied alternately by 2 and 1 (starting with 2), subtracting 9 from any product above 9, and the check digit brings the sum to the next 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:
+    //   <EcuadorCedulaDeIdentidadView label="Cedula de Identidad Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/C%C3%A9dula_de_identidad
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EcuadorCedulaDeIdentidadView.svelte -->
+<span
+    class={`ecuador-cedula-de-identidad-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/EireIndividualHealthIdentifierView/EireIndividualHealthIdentifierView.svelte

@@ -34,4 +34,5 @@
 <span
     class={`eire-individual-health-identifier-view ${className}`}
     aria-label={label}
-    {...restProps}>{value}</span>
+    {...restProps}>{value}</span
+>

package/dist/components/EspanaTarjetaSanitariaIndividualView/EspanaTarjetaSanitariaIndividualView.svelte

@@ -40,4 +40,5 @@
 <span
     class={`espana-tarjeta-sanitaria-individual-view ${className}`}
     aria-label={label}
-    {...restProps}>{value}</span>
+    {...restProps}>{value}</span
+>

package/dist/components/Event/Event.svelte

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

package/dist/components/FeatureCard/FeatureCard.svelte

@@ -71,7 +71,11 @@
     {...restProps}
 >
     {#if imageUrl}
-        <img class="feature-card-image" src={imageUrl} alt={imageAlt ?? ""} />
+        <img
+            class="feature-card-image"
+            src={imageUrl}
+            alt={imageAlt ?? ""}
+        />
     {/if}
     <header class="feature-card-header">
         <h3 class="feature-card-heading">{heading}</h3>

package/dist/components/FeaturePhoto/FeaturePhoto.svelte

@@ -29,7 +29,10 @@
 </script>
 
 <!-- FeaturePhoto.svelte -->
-<figure class={`feature-photo ${className}`} {...restProps}>
+<figure
+    class={`feature-photo ${className}`}
+    {...restProps}
+>
     <img
         class="feature-photo-image"
         {src}

package/dist/components/FileTree/FileTree.svelte

@@ -48,7 +48,9 @@
     let bufferTimer: ReturnType<typeof setTimeout> | undefined;
 
     function allItems(): HTMLElement[] {
-        return treeRef ? Array.from(treeRef.querySelectorAll<HTMLElement>("[role='treeitem']")) : [];
+        return treeRef
+            ? Array.from(treeRef.querySelectorAll<HTMLElement>("[role='treeitem']"))
+            : [];
     }
 
     function parentItem(item: HTMLElement): HTMLElement | null {
@@ -72,7 +74,11 @@
     function ownText(item: HTMLElement): string {
         let text = "";
         item.childNodes.forEach((n) => {
-            if (n.nodeType === Node.ELEMENT_NODE && (n as HTMLElement).getAttribute("role") === "group") return;
+            if (
+                n.nodeType === Node.ELEMENT_NODE &&
+                (n as HTMLElement).getAttribute("role") === "group"
+            )
+                return;
             text += n.textContent ?? "";
         });
         return text.trim().toLowerCase();
@@ -154,7 +160,10 @@
                 if (expanded === "false") {
                     item.setAttribute("aria-expanded", "true");
                 } else if (expanded === "true") {
-                    focusItem(item.querySelector<HTMLElement>("[role='group'] [role='treeitem']") ?? undefined);
+                    focusItem(
+                        item.querySelector<HTMLElement>("[role='group'] [role='treeitem']") ??
+                            undefined,
+                    );
                 }
                 return;
             case "ArrowLeft":
@@ -175,7 +184,10 @@
             case "*":
                 event.preventDefault();
                 for (const sibling of Array.from(item.parentElement?.children ?? [])) {
-                    if (sibling.getAttribute("role") === "treeitem" && sibling.getAttribute("aria-expanded") === "false") {
+                    if (
+                        sibling.getAttribute("role") === "treeitem" &&
+                        sibling.getAttribute("aria-expanded") === "false"
+                    ) {
                         sibling.setAttribute("aria-expanded", "true");
                     }
                 }
@@ -190,7 +202,10 @@
             bufferTimer = setTimeout(() => (buffer = ""), 500);
             const cycle = buffer.length === 1 || [...buffer].every((c) => c === buffer[0]);
             const needle = cycle ? buffer[0] : buffer;
-            const ordered = [...visible.slice(index + (cycle ? 1 : 0)), ...visible.slice(0, index + (cycle ? 1 : 0))];
+            const ordered = [
+                ...visible.slice(index + (cycle ? 1 : 0)),
+                ...visible.slice(0, index + (cycle ? 1 : 0)),
+            ];
             focusItem(ordered.find((i) => ownText(i).startsWith(needle)));
         }
     }

package/dist/components/FiveFaceRatingPicker/FiveFaceRatingPicker.svelte

@@ -89,7 +89,9 @@
             timer = setTimeout(() => {
                 if (event.defaultPrevented || !root) return;
                 value = initialValue;
-                for (const input of root.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+                for (const input of root.querySelectorAll<HTMLInputElement>(
+                    'input[type="radio"]',
+                )) {
                     input.checked = input.value === String(initialValue);
                 }
             }, 0);

package/dist/components/FiveFaceRatingPickerButton/FiveFaceRatingPickerButton.svelte

@@ -77,5 +77,5 @@
     {disabled}
     data-value={value}
     {onclick}
-    {...restProps}
->{label}</button>
+    {...restProps}>{label}</button
+>

package/dist/components/FiveStarRatingPicker/FiveStarRatingPicker.svelte

@@ -88,7 +88,9 @@
             timer = setTimeout(() => {
                 if (event.defaultPrevented || !root) return;
                 value = initialValue;
-                for (const input of root.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+                for (const input of root.querySelectorAll<HTMLInputElement>(
+                    'input[type="radio"]',
+                )) {
                     input.checked = input.value === String(initialValue);
                 }
             }, 0);

package/dist/components/FiveStarRatingPickerButton/FiveStarRatingPickerButton.svelte

@@ -77,5 +77,5 @@
     {disabled}
     data-value={value}
     {onclick}
-    {...restProps}
->{label}</button>
+    {...restProps}>{label}</button
+>

package/dist/components/FlexStack/FlexStack.svelte

@@ -70,7 +70,9 @@
             `gap: ${gap}`,
             align ? `align-items: ${align}` : "",
             justify ? `justify-content: ${justify}` : "",
-        ].filter(Boolean).join("; ") + ";"
+        ]
+            .filter(Boolean)
+            .join("; ") + ";",
     );
 </script>
 

package/dist/components/FloatingPanel/FloatingPanel.svelte

@@ -2,8 +2,8 @@
     // FloatingPanel component
     //
     // A floating panel container that overlays page content, typically used for tooltips,
-    // popovers, dropdown menus, or contextual UI. It renders conditionally based on an
-    // open prop, fully removing itself from the DOM when closed. Consumers are responsible
+    // popovers, dropdown menus, or contextual UI. It is always rendered as a popover="manual", shown according to an
+    // open prop, display: none when closed. Consumers are responsible
     // for positioning the panel relative to a trigger element using their own CSS.
     //
     // Props:
@@ -39,7 +39,7 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles — consumer provides all styling and positioning
-    //   - Uses {#if open} for conditional rendering (fully removed from DOM when closed)
+    //   - 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.
     //   - Consumer manages show/hide logic externally
     //
     // References:
@@ -47,6 +47,8 @@
 
     import type { Snippet } from "svelte";
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         open = false,
@@ -65,13 +67,13 @@
 </script>
 
 <!-- FloatingPanel.svelte -->
-{#if open}
-    <div
-        class={`floating-panel ${className}`}
-        role="region"
-        aria-label={label}
-        {...restProps}
-    >
-        {@render children?.()}
-    </div>
-{/if}
+<div
+    class={`floating-panel ${className}`}
+    role="region"
+    popover="manual"
+    use:popoverState={open}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/FunnelChart/FunnelChart.svelte

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

package/dist/components/GaugeChart/GaugeChart.svelte

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

package/dist/components/GoToNextSection/GoToNextSection.svelte

@@ -2,7 +2,6 @@
     // GoToNextSection component
     // A link that takes users to the next section of the current page.
 
-
     let {
         class: className = "",
         label,
@@ -20,5 +19,5 @@
     class={`go-to-next-section ${className}`}
     {href}
     aria-label={label}
-    {...restProps}
->{label}</a>
+    {...restProps}>{label}</a
+>

package/dist/components/GoToPreviousSection/GoToPreviousSection.svelte

@@ -2,7 +2,6 @@
     // GoToPreviousSection component
     // A link that takes users to the previous section of the current page.
 
-
     let {
         class: className = "",
         label,
@@ -20,5 +19,5 @@
     class={`go-to-previous-section ${className}`}
     {href}
     aria-label={label}
-    {...restProps}
->{label}</a>
+    {...restProps}>{label}</a
+>

package/dist/components/GoToTop/GoToTop.svelte

@@ -18,8 +18,6 @@
 <!-- GoToTop.svelte -->
 <a
     class={`go-to-top ${className}`}
-
-
     {href}
     {...restProps}
 >

package/dist/components/GrailLayoutBottomFooter/GrailLayoutBottomFooter.svelte

@@ -32,6 +32,9 @@
 </script>
 
 <!-- GrailLayoutBottomFooter.svelte -->
-<footer class={`grail-layout-bottom-footer ${className}`} {...restProps}>
+<footer
+    class={`grail-layout-bottom-footer ${className}`}
+    {...restProps}
+>
     {@render children?.()}
 </footer>

package/dist/components/GrailLayoutCenterMain/GrailLayoutCenterMain.svelte

@@ -31,6 +31,9 @@
 </script>
 
 <!-- GrailLayoutCenterMain.svelte -->
-<main class={`grail-layout-center-main ${className}`} {...restProps}>
+<main
+    class={`grail-layout-center-main ${className}`}
+    {...restProps}
+>
     {@render children?.()}
 </main>

package/dist/components/GrailLayoutLeftAside/GrailLayoutLeftAside.svelte

@@ -31,6 +31,9 @@
 </script>
 
 <!-- GrailLayoutLeftAside.svelte -->
-<aside class={`grail-layout-left-aside ${className}`} {...restProps}>
+<aside
+    class={`grail-layout-left-aside ${className}`}
+    {...restProps}
+>
     {@render children?.()}
 </aside>

package/dist/components/GrailLayoutRightAside/GrailLayoutRightAside.svelte

@@ -32,6 +32,9 @@
 </script>
 
 <!-- GrailLayoutRightAside.svelte -->
-<aside class={`grail-layout-right-aside ${className}`} {...restProps}>
+<aside
+    class={`grail-layout-right-aside ${className}`}
+    {...restProps}
+>
     {@render children?.()}
 </aside>

package/dist/components/GrailLayoutTopHeader/GrailLayoutTopHeader.svelte

@@ -32,6 +32,9 @@
 </script>
 
 <!-- GrailLayoutTopHeader.svelte -->
-<header class={`grail-layout-top-header ${className}`} {...restProps}>
+<header
+    class={`grail-layout-top-header ${className}`}
+    {...restProps}
+>
     {@render children?.()}
 </header>