@lilydesignsystem/svelte-headless 0.6.0 → 0.6.2

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertFromUnitDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertFromUnitDiv = ReturnType<typeof ConvertFromUnitDiv>;
+export default ConvertFromUnitDiv;

package/dist/components/ConvertFromValueDiv/ConvertFromValueDiv.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    // ConvertFromValueDiv component
+    //
+    // A headless part of ConvertDiv: the value to convert from, such as a text input holding the number of dollars. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertFromValueDiv.svelte -->
+<div
+    class={`convert-from-value-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertFromValueDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertFromValueDiv = ReturnType<typeof ConvertFromValueDiv>;
+export default ConvertFromValueDiv;

package/dist/components/ConvertIntoDiv/ConvertIntoDiv.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    // ConvertIntoDiv component
+    //
+    // A headless part of ConvertDiv: the target side of a conversion, holding the value and unit to convert into. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertIntoDiv.svelte -->
+<div
+    class={`convert-into-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertIntoDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertIntoDiv = ReturnType<typeof ConvertIntoDiv>;
+export default ConvertIntoDiv;

package/dist/components/ConvertIntoUnitDiv/ConvertIntoUnitDiv.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    // ConvertIntoUnitDiv component
+    //
+    // A headless part of ConvertDiv: the unit to convert into, such as a select box of currencies or lengths. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertIntoUnitDiv.svelte -->
+<div
+    class={`convert-into-unit-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertIntoUnitDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertIntoUnitDiv = ReturnType<typeof ConvertIntoUnitDiv>;
+export default ConvertIntoUnitDiv;

package/dist/components/ConvertIntoValueDiv/ConvertIntoValueDiv.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    // ConvertIntoValueDiv component
+    //
+    // A headless part of ConvertDiv: the converted value, such as a text input showing the number of euros. Contract: a plain <div> with the base class and children.
+    // Converts nothing and carries no strings of its own; the consumer supplies the controls.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ConvertIntoValueDiv.svelte -->
+<div
+    class={`convert-into-value-div ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ConvertIntoValueDiv: import("svelte").Component<$$ComponentProps, {}, "">;
+type ConvertIntoValueDiv = ReturnType<typeof ConvertIntoValueDiv>;
+export default ConvertIntoValueDiv;

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

@@ -54,6 +54,7 @@
     //   - WAI-ARIA dialog role: https://www.w3.org/TR/wai-aria-1.2/#dialog
 
     import type { Snippet } from "svelte";
+    import { modalDialog } from "./modal.js";
 
     let {
         class: className = "",
@@ -80,17 +81,29 @@
             open = false;
         }
     }
+    function oncancel(event: Event) {
+        event.preventDefault();
+        open = false;
+    }
+    function onclose() {
+        open = false;
+    }
 </script>
 
 <!-- Dialog.svelte -->
 {#if open}
+    <!-- A modal dialog is opened by `showModal()` (see modal.ts), so the `open` attribute is only rendered for a
+         non-modal one; the keydown and cancel handlers keep `open` in step with a native Escape or `<form method="dialog">`. -->
     <dialog
         class={`dialog ${className}`}
-        open
+        open={modal ? undefined : true}
         tabindex="-1"
         aria-label={label}
         aria-modal={modal || undefined}
+        use:modalDialog={modal}
         {onkeydown}
+        {oncancel}
+        {onclose}
         {...restProps}
     >
         {@render children?.()}

package/dist/components/Dialog/modal.d.ts

@@ -0,0 +1,4 @@
+export declare function modalDialog(node: HTMLDialogElement, enabled: boolean): {
+    update(next: boolean): void;
+    destroy(): void;
+};

package/dist/components/Dialog/modal.js

@@ -0,0 +1,47 @@
+// Show a <dialog> as a real modal, or as a plain open dialog.
+//
+// A modal dialog is opened with `showModal()`: the browser puts it in the top layer, makes the rest of the page
+// inert (no pointer, no keyboard, no assistive-technology access behind it), traps Tab inside it, moves focus to
+// it and returns focus to the opener when it closes. Setting the `open` attribute does none of that, so a dialog
+// that only sets `open` and says `aria-modal="true"` claims a modality it does not have.
+//
+// Where `showModal` is missing (jsdom, very old browsers) the dialog falls back to the `open` attribute, which
+// keeps it visible and testable. Used as `use:modalDialog={modal}`.
+export function modalDialog(node, enabled) {
+    let modal = enabled;
+    // Where focus was when the dialog opened. A native close() would hand focus back there, but Svelte takes the element
+    // out of the page before this action's cleanup runs, so by then the browser can no longer do it: we do.
+    const opener = typeof document === "undefined" ? null : document.activeElement;
+    function show() {
+        if (node.open)
+            return;
+        if (modal && typeof node.showModal === "function")
+            node.showModal();
+        else
+            node.setAttribute("open", "");
+    }
+    function hide() {
+        if (!node.open)
+            return;
+        if (typeof node.close === "function")
+            node.close();
+        else
+            node.removeAttribute("open");
+    }
+    show();
+    return {
+        update(next) {
+            if (next === modal)
+                return;
+            // Modal and non-modal are different openings: close the old one and open the new one.
+            hide();
+            modal = next;
+            show();
+        },
+        destroy() {
+            hide();
+            if (opener && opener !== document.body && opener.isConnected)
+                opener.focus();
+        },
+    };
+}

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?.()}

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}