@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -52,6 +52,7 @@
     //   - WAI-ARIA Menu Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menu/
 
     import type { Snippet } from "svelte";
+    import { popoverState, toggleOpened } from "../Popover/popover.js";
 
     let {
         class: className = "",
@@ -75,8 +76,7 @@
     // When the menu opens, focus the first menuitem.
     $effect(() => {
         if (open && menuRef) {
-            const firstItem =
-                menuRef.querySelector<HTMLElement>("[role='menuitem']");
+            const firstItem = menuRef.querySelector<HTMLElement>("[role='menuitem']");
             firstItem?.focus();
         }
     });
@@ -84,9 +84,7 @@
     // Keyboard navigation within the menu.
     function onkeydown(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);
 
@@ -122,15 +120,19 @@
     }
 </script>
 
-{#if open}
-    <div
-        class={`context-menu ${className}`}
-        role="menu"
-        aria-label={label}
-        bind:this={menuRef}
-        {onkeydown}
-        {...restProps}
-    >
-        {@render children?.()}
-    </div>
-{/if}
+<!-- popover="auto": there is no declarative trigger (a right-click or long-press opens it), so popoverState shows it
+     with showPopover() when `open` turns true, in the top layer; light dismiss and Escape come from the browser and the
+     toggle event writes `open` back. Positioning at the pointer stays the consumer's CSS. -->
+<div
+    class={`context-menu ${className}`}
+    role="menu"
+    aria-label={label}
+    popover="auto"
+    bind:this={menuRef}
+    use:popoverState={open}
+    ontoggle={(event) => (open = toggleOpened(event))}
+    {onkeydown}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

package/dist/components/ContextualHelp/ContextualHelp.svelte

@@ -3,49 +3,56 @@
     //
     // A help button that opens a popover with explanatory content. Renders a
     // wrapper `<div>` containing a `<button>` trigger (aria-haspopup="dialog",
-    // aria-expanded, aria-controls) and a `<div role="dialog">` panel that is
-    // hidden when `expanded` is false. The panel id is auto-generated for
-    // a stable aria-controls relationship.
+    // aria-expanded, aria-controls) and a `<div role="dialog" popover="auto">`
+    // panel. The trigger opens and closes the panel through the native Popover
+    // API with command="toggle-popover" commandfor={panelId} (and popovertarget
+    // for engines before command/commandfor), so open, Escape and light dismiss
+    // need no script; the panel's `toggle` event keeps `expanded` in step. Where
+    // the Popover API is missing (jsdom, old engines) the trigger's click toggles
+    // `expanded` and the panel's `hidden` attribute instead.
     //
     // Props:
     //   class — string, optional. CSS class appended to the base class.
-    //   label — string, REQUIRED. aria-label for the trigger button.
-    //   expanded — boolean, default false. Whether the popover is open.
-    //   onclick — (event: MouseEvent) => void, optional. Trigger click handler.
+    //   label — string, REQUIRED. aria-label for the trigger button (its accessible name).
+    //   triggerLabel — string, REQUIRED. Visible text of the trigger, such as "?" or "؟".
+    //     No default: the glyph is the consumer's, per script and locale. Pass "" when
+    //     the consumer's CSS draws an icon instead.
+    //   expanded — boolean, default false, bindable. Whether the popover is open;
+    //     set by the browser's toggle (trigger, Escape, light dismiss).
+    //   onclick — (event: MouseEvent) => void, optional. Trigger click handler;
+    //     call event.preventDefault() to stop the trigger toggling the panel.
     //   children — Snippet, optional. Popover content.
     //
     // Syntax:
-    //   <ContextualHelp label="Help" expanded={open} onclick={toggle}>
+    //   <ContextualHelp label="Help" triggerLabel="?" bind:expanded>
     //       <p>Help content</p>
     //   </ContextualHelp>
     //
+    // Keyboard:
+    //   - Enter / Space on the trigger toggles the panel
+    //   - Escape closes the panel (browser, Popover API)
+    //
     // Accessibility:
     //   - Trigger: aria-haspopup="dialog", aria-expanded, aria-controls
-    //   - Panel: role="dialog", id matched by aria-controls
+    //   - Panel: role="dialog", id matched by aria-controls and commandfor
     //
     // Internationalization:
-    //   - All user-facing strings via props
+    //   - All user-facing strings via props: label (accessible name) and
+    //     triggerLabel (visible glyph or text)
     //
     // References:
     //   - Adobe Spectrum ContextualHelp: https://spectrum.adobe.com/page/contextual-help/
     //   - WAI-ARIA Dialog Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+    //   - HTML command and commandfor: https://html.spec.whatwg.org/multipage/form-elements.html#attr-button-command
 
     import type { Snippet } from "svelte";
-
-    function makeId(prefix: string): string {
-        if (
-            typeof crypto !== "undefined" &&
-            typeof crypto.randomUUID === "function"
-        ) {
-            return `${prefix}-${crypto.randomUUID()}`;
-        }
-        return `${prefix}-${Math.random().toString(36).slice(2, 11)}`;
-    }
+    import { popoverState, popoverSupported, toggleOpened } from "../Popover/popover.js";
 
     let {
         class: className = "",
         label,
-        expanded = false,
+        triggerLabel,
+        expanded = $bindable(false),
         onclick = undefined,
         children = undefined,
         ...restProps
@@ -53,7 +60,9 @@
         class?: string;
         /** Accessible label for the trigger (REQUIRED) */
         label: string;
-        /** Whether the popover is open */
+        /** Visible text of the trigger, such as "?" (REQUIRED; no default) */
+        triggerLabel: string;
+        /** Whether the popover is open. Bindable. */
         expanded?: boolean;
         /** Trigger click handler */
         onclick?: (event: MouseEvent) => void;
@@ -62,11 +71,25 @@
         [key: string]: unknown;
     } = $props();
 
-    const panelId = makeId("contextual-help-panel");
+    // Hydration-stable: the server and the client agree on it, so commandfor still names the panel.
+    const uid = $props.id();
+    const panelId = `contextual-help-panel-${uid}`;
+    let panel: HTMLDivElement | undefined = $state();
+
+    function toggle(event: MouseEvent) {
+        onclick?.(event);
+        if (event.defaultPrevented) return;
+        // With the Popover API the browser toggles the panel (command / popovertarget) and the toggle event
+        // updates `expanded`; without it, toggle here.
+        if (panel && !popoverSupported(panel)) expanded = !expanded;
+    }
 </script>
 
 <!-- ContextualHelp.svelte -->
-<div class={`contextual-help ${className}`} {...restProps}>
+<div
+    class={`contextual-help ${className}`}
+    {...restProps}
+>
     <button
         class="contextual-help-trigger"
         type="button"
@@ -74,13 +97,19 @@
         aria-haspopup="dialog"
         aria-expanded={expanded}
         aria-controls={panelId}
-        {onclick}
-    >?</button>
+        command="toggle-popover"
+        commandfor={panelId}
+        popovertarget={panelId}
+        onclick={toggle}>{triggerLabel}</button
+    >
     <div
+        bind:this={panel}
         class="contextual-help-panel"
         id={panelId}
         role="dialog"
-        hidden={!expanded}
+        popover="auto"
+        use:popoverState={expanded}
+        ontoggle={(event) => (expanded = toggleOpened(event))}
     >
         {#if children}
             {@render children?.()}

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

@@ -3,7 +3,9 @@ type $$ComponentProps = {
     class?: string;
     /** Accessible label for the trigger (REQUIRED) */
     label: string;
-    /** Whether the popover is open */
+    /** Visible text of the trigger, such as "?" (REQUIRED; no default) */
+    triggerLabel: string;
+    /** Whether the popover is open. Bindable. */
     expanded?: boolean;
     /** Trigger click handler */
     onclick?: (event: MouseEvent) => void;
@@ -11,6 +13,6 @@ type $$ComponentProps = {
     children?: Snippet;
     [key: string]: unknown;
 };
-declare const ContextualHelp: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ContextualHelp: import("svelte").Component<$$ComponentProps, {}, "expanded">;
 type ContextualHelp = ReturnType<typeof ContextualHelp>;
 export default ContextualHelp;

package/dist/components/ConvertDiv/ConvertDiv.svelte

@@ -22,7 +22,9 @@
 
 <!-- ConvertDiv.svelte -->
 <div
-    class={`convert-div ${className}`} role="group" aria-label={label}
+    class={`convert-div ${className}`}
+    role="group"
+    aria-label={label}
     {...restProps}
 >
     {@render children?.()}

package/dist/components/ConvertFromDiv/ConvertFromDiv.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/ConvertFromUnitDiv/ConvertFromUnitDiv.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/ConvertFromValueDiv/ConvertFromValueDiv.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/ConvertIntoDiv/ConvertIntoDiv.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/ConvertIntoUnitDiv/ConvertIntoUnitDiv.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/ConvertIntoValueDiv/ConvertIntoValueDiv.svelte

@@ -10,7 +10,6 @@
         children,
         ...restProps
     }: {
-
         /** The content. */
         children?: Snippet;
         [key: string]: unknown;

package/dist/components/CurrencyInput/CurrencyInput.svelte

@@ -1,18 +1,71 @@
 <script lang="ts">
-    import type { Snippet } from "svelte";
+    // CurrencyInput component
+    //
+    // A currency input rendered as a native <input type="text" inputmode="decimal">.
+    // The component does not format the displayed value; formatting
+    // (Intl.NumberFormat, separators, currency symbol placement) is the consumer's
+    // responsibility. currencyCode is exposed as data-currency-code so the
+    // consumer can pass it to Intl.NumberFormat. It is REQUIRED and never
+    // defaulted: the component does not pick a currency.
+    //
+    // Props:
+    //   class        — string, optional. CSS class name.
+    //   label        — string, required. Accessible name via aria-label.
+    //   value        — number | undefined, bindable. Parsed numeric value.
+    //   currencyCode — string, required, no default. ISO 4217 currency code.
+    //   min, max     — number, optional. Constraints, not enforced clamping.
+    //   required, disabled — boolean, default false.
+    //   ...restProps — spread onto the <input>.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles; no locale formatting baked in
+    //   - Never default currencyCode (AGENTS/internationalization.md)
+
     let {
         class: className = "",
-        label = undefined,
-        children,
+        label,
+        value = $bindable(undefined),
+        currencyCode,
+        min = undefined,
+        max = undefined,
+        required = false,
+        disabled = false,
         ...restProps
     }: {
-        label?: string;
-        children: Snippet;
+        class?: string;
+        label: string;
+        value?: number | undefined;
+        currencyCode: string;
+        min?: number;
+        max?: number;
+        required?: boolean;
+        disabled?: boolean;
         [key: string]: unknown;
     } = $props();
+
+    function oninput(event: Event) {
+        const raw = (event.currentTarget as HTMLInputElement).value.trim();
+        if (raw === "") {
+            value = undefined;
+            return;
+        }
+        const parsed = Number(raw);
+        value = Number.isNaN(parsed) ? undefined : parsed;
+    }
 </script>
 
 <!-- CurrencyInput.svelte -->
-<div class={`currency-input ${className}`} aria-label={label} {...restProps}>
-    {@render children?.()}
-</div>
+<input
+    class={`currency-input ${className}`}
+    type="text"
+    inputmode="decimal"
+    aria-label={label}
+    data-currency-code={currencyCode}
+    value={value === undefined ? "" : String(value)}
+    {min}
+    {max}
+    {required}
+    {disabled}
+    {oninput}
+    {...restProps}
+/>

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

@@ -1,9 +1,14 @@
-import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    label?: string;
-    children: Snippet;
+    class?: string;
+    label: string;
+    value?: number | undefined;
+    currencyCode: string;
+    min?: number;
+    max?: number;
+    required?: boolean;
+    disabled?: boolean;
     [key: string]: unknown;
 };
-declare const CurrencyInput: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const CurrencyInput: import("svelte").Component<$$ComponentProps, {}, "value">;
 type CurrencyInput = ReturnType<typeof CurrencyInput>;
 export default CurrencyInput;

package/dist/components/DateTimeNowInput/DateTimeNowInput.svelte

@@ -10,9 +10,10 @@
     // Props:
     //   className — string, optional. CSS class name.
     //   label — string, required. Accessible name for the wrapper group via aria-label.
-    //   dateLabel — string, default "Date". Accessible name for the date input via aria-label.
-    //   timeLabel — string, default "Time". Accessible name for the time input via aria-label.
-    //   nowLabel — string, default "Now". Accessible label and text for the "Now" button.
+    //   dateLabel — string, required. Accessible name for the date input via aria-label.
+    //   timeLabel — string, required. Accessible name for the time input via aria-label.
+    //   nowLabel — string, required. Accessible label and text for the "Now" button.
+    //   The three come from the locale-translations packs: {...dateTimeNowInputLabels(pack)}.
     //   dateValue — string, default "". Bindable date string (format: YYYY-MM-DD).
     //   timeValue — string, default "". Bindable time string (format: HH:mm).
     //   required — boolean, default false. Whether the inputs are required.
@@ -20,17 +21,17 @@
     //   ...restProps — additional HTML attributes spread onto the wrapper <div>.
     //
     // Syntax:
-    //   <DateTimeNowInput label="Event time" bind:dateValue bind:timeValue />
+    //   <DateTimeNowInput label="Event time" dateLabel="Date" timeLabel="Time" nowLabel="Now" bind:dateValue bind:timeValue />
     //
     // Examples:
-    //   <!-- Basic usage -->
-    //   <DateTimeNowInput label="Event time" bind:dateValue bind:timeValue />
+    //   <!-- Labels from a locale pack (@lilydesignsystem/svelte-locale-translations) -->
+    //   <DateTimeNowInput label="Heure de l'événement" {...dateTimeNowInputLabels(fr)} bind:dateValue bind:timeValue />
     //
-    //   <!-- Custom labels for internationalization -->
-    //   <DateTimeNowInput label="Heure" dateLabel="Date" timeLabel="Heure" nowLabel="Maintenant" bind:dateValue bind:timeValue />
+    //   <!-- Labels written by hand -->
+    //   <DateTimeNowInput label="Event time" dateLabel="Date" timeLabel="Time" nowLabel="Now" bind:dateValue bind:timeValue />
     //
     //   <!-- Required and disabled -->
-    //   <DateTimeNowInput label="Appointment" bind:dateValue bind:timeValue required disabled={isLocked} />
+    //   <DateTimeNowInput label="Appointment" {...labels} bind:dateValue bind:timeValue required disabled={isLocked} />
     //
     // Keyboard:
     //   - Tab: Moves focus between the date input, time input, and "Now" button
@@ -45,7 +46,8 @@
     //
     // Internationalization:
     //   - The label, dateLabel, timeLabel, and nowLabel props are the only user-facing strings
-    //   - Default labels are "Date", "Time", and "Now"; override for other locales
+    //   - No default labels: a missing one leaves its control unnamed rather than in English.
+    //     dateTimeNowInputLabels(pack) from the locale-translations package gives all three in 64 locales.
     //   - No other hardcoded user-facing strings
     //
     // Claude rules:
@@ -59,9 +61,9 @@
     let {
         class: className = "",
         label,
-        dateLabel = "Date",
-        timeLabel = "Time",
-        nowLabel = "Now",
+        dateLabel,
+        timeLabel,
+        nowLabel,
         dateValue = $bindable(""),
         timeValue = $bindable(""),
         required = false,
@@ -69,9 +71,9 @@
         ...restProps
     }: {
         label: string;
-        dateLabel?: string;
-        timeLabel?: string;
-        nowLabel?: string;
+        dateLabel: string;
+        timeLabel: string;
+        nowLabel: string;
         dateValue?: string;
         timeValue?: string;
         required?: boolean;

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

@@ -1,8 +1,8 @@
 type $$ComponentProps = {
     label: string;
-    dateLabel?: string;
-    timeLabel?: string;
-    nowLabel?: string;
+    dateLabel: string;
+    timeLabel: string;
+    nowLabel: string;
     dateValue?: string;
     timeValue?: string;
     required?: boolean;

package/dist/components/DescriptionList/DescriptionList.svelte

@@ -16,8 +16,6 @@
 <!-- DescriptionList.svelte -->
 <dl
     class={`description-list ${className}`}
-
-
     {...restProps}
 >
     {@render children?.()}

package/dist/components/DescriptionListItem/DescriptionListItem.svelte

@@ -16,8 +16,6 @@
 <!-- DescriptionListItem.svelte -->
 <div
     class={`description-list-item ${className}`}
-
-
     {...restProps}
 >
     {@render children?.()}

package/dist/components/DialGroup/DialGroup.svelte

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

package/dist/components/Dialog/Dialog.svelte

@@ -102,8 +102,8 @@
         aria-modal={modal || undefined}
         use:modalDialog={modal}
         {onkeydown}
-        oncancel={oncancel}
-        onclose={onclose}
+        {oncancel}
+        {onclose}
         {...restProps}
     >
         {@render children?.()}

package/dist/components/Diff/Diff.svelte

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

package/dist/components/DigitalObjectIdentifierLink/DigitalObjectIdentifierLink.svelte

@@ -1,18 +1,27 @@
 <script lang="ts">
+    // DigitalObjectIdentifierLink: a link to a Digital Object Identifier through the https://doi.org/ resolver.
+    // The display text is the consumer's children, or the DOI itself when none is given.
     import type { Snippet } from "svelte";
     let {
         class: className = "",
-        label = undefined,
-        children,
+        doi,
+        children = undefined,
         ...restProps
     }: {
-        label?: string;
-        children: Snippet;
+        /** The Digital Object Identifier, e.g. "10.1000/xyz123". */
+        doi: string;
+        /** Link display text; the DOI when omitted. */
+        children?: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- DigitalObjectIdentifierLink.svelte -->
-<div class={`digital-object-identifier-link ${className}`} aria-label={label} {...restProps}>
-    {@render children?.()}
-</div>
+<a
+    class={`digital-object-identifier-link ${className}`}
+    href={`https://doi.org/${doi}`}
+    rel="noopener noreferrer"
+    {...restProps}
+>
+    {#if children}{@render children()}{:else}{doi}{/if}
+</a>

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

@@ -1,7 +1,9 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    label?: string;
-    children: Snippet;
+    /** The Digital Object Identifier, e.g. "10.1000/xyz123". */
+    doi: string;
+    /** Link display text; the DOI when omitted. */
+    children?: Snippet;
     [key: string]: unknown;
 };
 declare const DigitalObjectIdentifierLink: import("svelte").Component<$$ComponentProps, {}, "">;

package/dist/components/DocumentList/DocumentList.svelte

@@ -16,7 +16,6 @@
 <!-- DocumentList.svelte -->
 <ul
     class={`document-list ${className}`}
-
     aria-label={label}
     {...restProps}
 >

package/dist/components/DocumentListItem/DocumentListItem.svelte

@@ -16,8 +16,6 @@
 <!-- DocumentListItem.svelte -->
 <li
     class={`document-list-item ${className}`}
-
-
     {...restProps}
 >
     {@render children?.()}