@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/Person/Person.svelte

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

package/dist/components/PhaseBanner/PhaseBanner.svelte

@@ -16,7 +16,6 @@
 <!-- PhaseBanner.svelte -->
 <div
     class={`phase-banner ${className}`}
-
     aria-label={label}
     {...restProps}
 >

package/dist/components/Pictogram/Pictogram.svelte

@@ -72,7 +72,10 @@
     aria-label={label}
     {...restProps}
 >
-    <div class="pictogram-icon" aria-hidden="true">
+    <div
+        class="pictogram-icon"
+        aria-hidden="true"
+    >
         {@render icon()}
     </div>
     <figcaption class="pictogram-caption">

package/dist/components/Picture/Picture.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    // Picture component
+    //
+    // A headless wrapper around the native picture element: the browser chooses among the source
+    // children (by media query, image type or resolution) and falls back to the img child.
+    // Draws nothing and carries no strings of its own; the consumer supplies the source and img
+    // elements, including the img's alt text.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** The source elements, then one img with its alt, width and height. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Picture.svelte -->
+<picture
+    class={`picture ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</picture>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The source elements, then one img with its alt, width and height. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Picture: import("svelte").Component<$$ComponentProps, {}, "">;
+type Picture = ReturnType<typeof Picture>;
+export default Picture;

package/dist/components/PieChart/PieChart.svelte

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

package/dist/components/Place/Place.svelte

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

package/dist/components/PopconfirmDialog/PopconfirmDialog.svelte

@@ -44,6 +44,8 @@
     //   - Ant Design Popconfirm: https://ant.design/components/popconfirm
     //   - WAI-ARIA Alert and Message Dialogs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
 
+    import { popoverState } from "../Popover/popover.js";
+
     let {
         class: className = "",
         open = false,
@@ -95,12 +97,23 @@
     aria-modal="false"
     aria-labelledby={titleId}
     aria-describedby={description ? descId : undefined}
-    hidden={!open}
+    popover="manual"
+    use:popoverState={open}
     {...restProps}
 >
-    <h2 class="popconfirm-dialog-title" id={titleId}>{title}</h2>
+    <h2
+        class="popconfirm-dialog-title"
+        id={titleId}
+    >
+        {title}
+    </h2>
     {#if description}
-        <p class="popconfirm-dialog-description" id={descId}>{description}</p>
+        <p
+            class="popconfirm-dialog-description"
+            id={descId}
+        >
+            {description}
+        </p>
     {/if}
     <button
         class="popconfirm-dialog-cancel"

package/dist/components/Popover/Popover.svelte

@@ -1,17 +1,22 @@
 <script lang="ts">
     // Popover component
     //
-    // A headless conditional dialog overlay that displays contextual information or
-    // actions near the element that triggered it. It renders a <div> with role="dialog"
-    // only when the open state is true, using $bindable() for two-way binding of
-    // visibility. Unlike tooltips, popovers can contain rich interactive content such
+    // A headless dialog overlay that displays contextual information or actions near
+    // the element that triggered it. It renders a <div popover="auto" role="dialog">:
+    // the native Popover API puts it in the top layer while open and closes it on
+    // Escape and on a click outside it (light dismiss), with no script. `open` is
+    // $bindable() and follows the element's `toggle` event, so a light dismiss or a
+    // command="toggle-popover" trigger keeps it in step. Unlike tooltips, popovers can contain rich interactive content such
     // as forms, buttons, or other controls. Commonly used for contextual menus,
     // information panels, and inline editing.
     //
     // Props:
     //   className — string, optional. CSS class name.
     //   label — string, required. Accessible name for the popover dialog via aria-label.
-    //   open — boolean, default false, bindable. Controls whether the popover is visible.
+    //   open — boolean, default false, bindable. Controls whether the popover is visible;
+    //     set to false when the browser closes it (Escape, light dismiss, a trigger).
+    //   id — string, optional (rest prop). Give one so a trigger can name the popover
+    //     with commandfor (or popovertarget).
     //   children — Snippet, required. The popover content.
     //   ...restProps — additional HTML attributes spread onto the <div>.
     //
@@ -19,21 +24,23 @@
     //   <Popover label="Info" bind:open>{children}</Popover>
     //
     // Examples:
-    //   <!-- Popover with toggle trigger -->
-    //   <button onclick={() => showPopover = !showPopover}>Toggle info</button>
-    //   <Popover label="Additional information" bind:open={showPopover}>
+    //   <!-- Trigger with no script: the browser opens and closes the popover -->
+    //   <button type="button" command="toggle-popover" commandfor="info-popover">Toggle info</button>
+    //   <Popover id="info-popover" label="Additional information" bind:open={showPopover}>
     //     <p>Here is some contextual information.</p>
-    //     <button onclick={() => showPopover = false}>Close</button>
+    //     <button type="button" command="hide-popover" commandfor="info-popover">Close</button>
     //   </Popover>
     //
     // Keyboard:
-    //   - Escape: consumer should implement closing the popover by setting open to false
-    //   - Tab: consumer should consider trapping focus within the popover when open
+    //   - Escape: the browser closes the popover (Popover API); where the API is missing,
+    //     the consumer closes it by setting open to false
+    //   - Tab: not trapped; a popover is non-modal (use Dialog for a modal)
     //
     // Accessibility:
     //   - role="dialog" identifies the popover as a dialog overlay
     //   - aria-label provides the accessible name for the dialog
-    //   - Conditionally rendered; not in the DOM when closed
+    //   - Always in the DOM, so a trigger can reference its id; closed it is not
+    //     displayed (the popover UA style, or `hidden` where the API is missing)
     //
     // Internationalization:
     //   - The label prop is the only text; all content comes through children
@@ -41,14 +48,18 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles — consumer provides all styling
-    //   - Consumer must provide trigger element and open/close logic
-    //   - Do not add focus trapping or Escape handling — consumer responsibility
+    //   - Consumer provides the trigger (command="toggle-popover" commandfor={id})
+    //   - Native first: popover="auto"; scripted fallback via ./popover.ts (Popover) when
+    //     showPopover is missing. No focus trapping — a popover is non-modal
     //
     // References:
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog/
     //   - WAI-ARIA dialog role: https://www.w3.org/TR/wai-aria-1.2/#dialog
+    //   - HTML popover attribute: https://html.spec.whatwg.org/multipage/popover.html
+    //   - MDN Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
 
     import type { Snippet } from "svelte";
+    import { popoverState, toggleOpened } from "./popover.js";
     let {
         class: className = "",
         label,
@@ -64,13 +75,17 @@
 </script>
 
 <!-- Popover.svelte -->
-{#if open}
-    <div
-        class={`popover ${className}`}
-        role="dialog"
-        aria-label={label}
-        {...restProps}
-    >
-        {@render children?.()}
-    </div>
-{/if}
+<!-- popover="auto": top layer, light dismiss and Escape from the browser; popoverState opens and closes it from
+     `open` (or sets `hidden` where the Popover API is missing), and the toggle event writes the browser's changes
+     back to `open`. -->
+<div
+    class={`popover ${className}`}
+    role="dialog"
+    aria-label={label}
+    popover="auto"
+    use:popoverState={open}
+    ontoggle={(event) => (open = toggleOpened(event))}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/Popover/popover.d.ts

@@ -0,0 +1,9 @@
+/** Whether this element has the Popover API (`showPopover` and `hidePopover`). */
+export declare function popoverSupported(node: HTMLElement): boolean;
+/** Open or close a popover element, or set `hidden` where the Popover API is missing. */
+export declare function syncPopover(node: HTMLElement, open: boolean): void;
+/** The `toggle` event's new state, as a boolean (true when the popover opened). */
+export declare function toggleOpened(event: Event): boolean;
+export declare function popoverState(node: HTMLElement, open: boolean): {
+    update(next: boolean): void;
+};

package/dist/components/Popover/popover.js

@@ -0,0 +1,50 @@
+// Show and hide a popover="auto" element through the Popover API, or with the `hidden` attribute.
+//
+// A popover="auto" element is in the top layer while open, and the browser closes it on Escape and on a click
+// outside it (light dismiss). A button with command="toggle-popover" commandfor="<id>" (or popovertarget="<id>")
+// opens and closes it with no script at all. Each of those changes fires a `toggle` event on the element, whose
+// `newState` is "open" or "closed": listen to it to keep a bindable `open` in step.
+//
+// Where the Popover API is missing (jsdom, browsers before Chrome 114, Firefox 125 and Safari 17) the element
+// falls back to the `hidden` attribute, which keeps it hidden or shown and testable; light dismiss and Escape are
+// then the consumer's, as before. The fallback also drops the `popover` attribute, which does nothing there except
+// in jsdom, whose UA stylesheet hides every [popover] it cannot open. Used as `use:popoverState={open}`.
+/** Whether this element has the Popover API (`showPopover` and `hidePopover`). */
+export function popoverSupported(node) {
+    return typeof node.showPopover === "function" && typeof node.hidePopover === "function";
+}
+/** Open or close a popover element, or set `hidden` where the Popover API is missing. */
+export function syncPopover(node, open) {
+    if (!popoverSupported(node)) {
+        node.removeAttribute("popover");
+        node.toggleAttribute("hidden", !open);
+        return;
+    }
+    // Showing an open popover or hiding a closed one is a no-op in current engines; older ones throw
+    // InvalidStateError, as does an element that is not connected or has no popover attribute.
+    try {
+        if (open)
+            node.showPopover();
+        else
+            node.hidePopover();
+    }
+    catch {
+        // Already in that state, or not a valid popover: nothing to do.
+    }
+}
+/** The `toggle` event's new state, as a boolean (true when the popover opened). */
+export function toggleOpened(event) {
+    return event.newState === "open";
+}
+export function popoverState(node, open) {
+    let current = open;
+    syncPopover(node, current);
+    return {
+        update(next) {
+            if (next === current)
+                return;
+            current = next;
+            syncPopover(node, current);
+        },
+    };
+}

package/dist/components/Popup/Popup.svelte

@@ -1,16 +1,22 @@
 <script lang="ts">
     // Popup component
     //
-    // A headless conditional overlay dialog that temporarily appears over the main
+    // A headless overlay dialog that temporarily appears over the main
     // content to convey information, prompt user actions, or display additional
-    // options. It renders a <div> with role="dialog" only when the open state is
-    // true. Similar to Popover but designed as a general-purpose overlay dialog.
+    // options. It renders a <div popover="auto" role="dialog">: the native Popover
+    // API puts it in the top layer while open and closes it on Escape and on a click
+    // outside it (light dismiss), with no script. `open` is $bindable() and follows
+    // the element's `toggle` event. Similar to Popover but designed as a
+    // general-purpose overlay dialog.
     // Commonly used for confirmations, prompts, contextual actions, and inline forms.
     //
     // Props:
     //   className — string, optional. CSS class name.
     //   label — string, required. Accessible name for the popup dialog via aria-label.
-    //   open — boolean, default false, bindable. Controls whether the popup is visible.
+    //   open — boolean, default false, bindable. Controls whether the popup is visible;
+    //     set to false when the browser closes it (Escape, light dismiss, a trigger).
+    //   id — string, optional (rest prop). Give one so a trigger can name the popup
+    //     with commandfor (or popovertarget).
     //   children — Snippet, required. Content rendered inside the dialog.
     //   ...restProps — additional HTML attributes spread onto the <div>.
     //
@@ -18,22 +24,23 @@
     //   <Popup label="Info" bind:open>{children}</Popup>
     //
     // Examples:
-    //   <!-- Confirmation popup -->
-    //   <button onclick={() => showPopup = !showPopup}>Open popup</button>
-    //   <Popup label="Confirmation" bind:open={showPopup}>
-    //     <p>Are you sure you want to proceed?</p>
-    //     <button onclick={() => showPopup = false}>Yes</button>
-    //     <button onclick={() => showPopup = false}>No</button>
+    //   <!-- Trigger with no script: the browser opens and closes the popup -->
+    //   <button type="button" command="toggle-popover" commandfor="info-popup">Toggle info</button>
+    //   <Popup id="info-popup" label="Additional information" bind:open={showPopup}>
+    //     <p>Here is some contextual information.</p>
+    //     <button type="button" command="hide-popover" commandfor="info-popup">Close</button>
     //   </Popup>
     //
     // Keyboard:
-    //   - Escape: consumer should implement closing the popup by setting open to false
-    //   - Tab: consumer should consider trapping focus within the popup when open
+    //   - Escape: the browser closes the popup (Popover API); where the API is missing,
+    //     the consumer closes it by setting open to false
+    //   - Tab: not trapped; a popover is non-modal (use Dialog for a modal)
     //
     // Accessibility:
     //   - role="dialog" identifies the popup as a dialog overlay
     //   - aria-label provides the accessible name for the dialog
-    //   - Conditionally rendered; not in the DOM when closed
+    //   - Always in the DOM, so a trigger can reference its id; closed it is not
+    //     displayed (the popover UA style, or `hidden` where the API is missing)
     //
     // Internationalization:
     //   - The label prop is the only text; all content comes through children
@@ -41,14 +48,18 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles — consumer provides all styling
-    //   - Consumer must provide trigger element and open/close logic
-    //   - Do not add focus trapping or Escape handling — consumer responsibility
+    //   - Consumer provides the trigger (command="toggle-popover" commandfor={id})
+    //   - Native first: popover="auto"; scripted fallback via ./popover.ts (Popover) when
+    //     showPopover is missing. No focus trapping — a popover is non-modal
     //
     // References:
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog/
     //   - WAI-ARIA dialog role: https://www.w3.org/TR/wai-aria-1.2/#dialog
+    //   - HTML popover attribute: https://html.spec.whatwg.org/multipage/popover.html
+    //   - MDN Popover API: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
 
     import type { Snippet } from "svelte";
+    import { popoverState, toggleOpened } from "../Popover/popover.js";
 
     let {
         class: className = "",
@@ -68,13 +79,17 @@
 </script>
 
 <!-- Popup.svelte -->
-{#if open}
-    <div
-        class={`popup ${className}`}
-        role="dialog"
-        aria-label={label}
-        {...restProps}
-    >
-        {@render children?.()}
-    </div>
-{/if}
+<!-- popover="auto": top layer, light dismiss and Escape from the browser; popoverState opens and closes it from
+     `open` (or sets `hidden` where the Popover API is missing), and the toggle event writes the browser's changes
+     back to `open`. -->
+<div
+    class={`popup ${className}`}
+    role="dialog"
+    aria-label={label}
+    popover="auto"
+    use:popoverState={open}
+    ontoggle={(event) => (open = toggleOpened(event))}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ProductCard/ProductCard.svelte

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

package/dist/components/ProgressBar/ProgressBar.svelte

@@ -2,7 +2,6 @@
     // ProgressBar component
     // A horizontal progress indicator.
 
-
     let {
         class: className = "",
         label,

package/dist/components/Question/Question.svelte

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

package/dist/components/RadarChart/RadarChart.svelte

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

package/dist/components/RedAmberGreenPickerButton/RedAmberGreenPickerButton.svelte

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

package/dist/components/RedOrangeYellowGreenBluePickerButton/RedOrangeYellowGreenBluePickerButton.svelte

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

package/dist/components/RelatedContent/RelatedContent.svelte

@@ -16,7 +16,6 @@
 <!-- RelatedContent.svelte -->
 <aside
     class={`related-content ${className}`}
-
     aria-label={label}
     {...restProps}
 >

package/dist/components/Resizable/Resizable.svelte

@@ -71,6 +71,7 @@
 </script>
 
 <!-- Resizable.svelte -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (a scrollable region must be keyboard-focusable (axe scrollable-region-focusable)) -->
 <div
     class={`resizable ${className}`}
     role="region"

package/dist/components/RingChart/RingChart.svelte

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

package/dist/components/SankeyChart/SankeyChart.svelte

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

package/dist/components/ScatterChart/ScatterChart.svelte

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

package/dist/components/ScreenReaderSpan/ScreenReaderSpan.svelte

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

package/dist/components/ScrollArea/ScrollArea.svelte

@@ -69,6 +69,7 @@
 </script>
 
 <!-- ScrollArea.svelte -->
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (a scrollable region must be keyboard-focusable (axe scrollable-region-focusable)) -->
 <div
     class={`scroll-area ${className}`}
     role="region"