@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

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/FileDialog/FileDialog.svelte

@@ -47,6 +47,7 @@
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
     //   - MDN dialog element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
     import type { Snippet } from "svelte";
+    import { modalDialog } from "../Dialog/modal.js";
     let {
         class: className = "",
         label,
@@ -71,7 +72,12 @@
 {#if open}
     <dialog
         class={`file-dialog ${className}`}
-        open
+        use:modalDialog={true}
+        oncancel={(event) => {
+            event.preventDefault();
+            open = false;
+        }}
+        onclose={() => (open = false)}
         tabindex="-1"
         aria-label={label}
         {onkeydown}

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>

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 */