@lilydesignsystem/svelte-headless 0.3.0 → 0.5.0

package/dist/components/NetPromoterScorePicker/NetPromoterScorePicker.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { untrack } from "svelte";
     // NetPromoterScorePicker component
     //
     // A headless Net Promoter Score (NPS) rating input that renders a fieldset
@@ -69,10 +70,38 @@
         name?: string;
         [key: string]: unknown;
     } = $props();
+
+    // Form reset: the radios use a one-way `checked`, which a reset clears
+    // without telling this component, so `value` would keep a rating the form no
+    // longer submits. Restore the initial value instead — one tick later, after
+    // the browser has reset the DOM, and not when the reset was cancelled.
+    let root: HTMLFieldSetElement | undefined = $state();
+    const initialValue = untrack(() => value);
+    $effect(() => {
+        const form = root?.form ?? root?.closest("form");
+        if (!form) return;
+        let timer: ReturnType<typeof setTimeout> | undefined;
+        const onReset = (event: Event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented || !root) return;
+                value = initialValue;
+                for (const input of root.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+                    input.checked = input.value === String(initialValue);
+                }
+            }, 0);
+        };
+        form.addEventListener("reset", onReset);
+        return () => {
+            clearTimeout(timer);
+            form.removeEventListener("reset", onReset);
+        };
+    });
 </script>
 
 <!-- NetPromoterScorePicker: a fieldset radiogroup with 11 radio buttons (0-10) -->
 <fieldset
+    bind:this={root}
     class={`net-promoter-score-picker ${className}`}
     role="radiogroup"
     aria-label={label}

package/dist/components/PieChart/PieChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // PieChart component
+    //
+    // A headless chart container for a circular chart divided into slices that show each part of a whole. The consumer supplies the inline
+    // svg as `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, optional. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="pie-chart">
+    //     <div class="pie-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="pie-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label?: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PieChart.svelte -->
+<figure
+    class={`pie-chart ${className}`}
+    {...restProps}
+>
+    <div class="pie-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="pie-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label?: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const PieChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type PieChart = ReturnType<typeof PieChart>;
+export default PieChart;

package/dist/components/PinInputDiv/PinInputDiv.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { untrack } from "svelte";
     // PinInputDiv component
     //
     // A headless PIN input that renders a group of single-character numeric inputs
@@ -12,6 +13,7 @@
     //   className — string, optional. CSS class name.
     //   label — string, required. Accessible label for the group of inputs via aria-label.
     //   length — number, default 4. Number of digit inputs to render.
+    //   digitLabel — (position, length) => string, optional. Each input's accessible name; defaults to `label`.
     //   value — string, default "". Bindable combined string of all entered digits.
     //   disabled — boolean, default false. Whether all inputs are disabled.
     //   ...restProps — additional HTML attributes spread onto the group <div>.
@@ -60,6 +62,7 @@
         class: className = "",
         label,
         length = 4,
+        digitLabel,
         value = $bindable(""),
         disabled = false,
         ...restProps
@@ -68,6 +71,11 @@
         label: string;
         /** Number of digit inputs to render */
         length?: number;
+        /**
+         * Each digit input's accessible name, e.g. (n, of) => `Digit ${n} of ${of}`.
+         * Without it each input is named by `label`: no English default.
+         */
+        digitLabel?: (position: number, length: number) => string;
         /** Combined string of all entered digits, bindable */
         value?: string;
         /** Whether all inputs are disabled */
@@ -79,7 +87,12 @@
     // Internal state: array of individual digit characters.
     // Note: the length prop is captured at initialization time for the initial
     // array size. This is intentional -- the pin length is expected to be static.
-    let digits: string[] = $state(Array.from({ length }, () => ""));
+    // Seeded from the initial `value`: starting empty meant the effect below
+    // overwrote a bound starting value with "" on mount.
+    const initialDigits = untrack(() =>
+        Array.from({ length }, (_, i) => (/^[0-9]$/.test(value[i] ?? "") ? value[i] : "")),
+    );
+    let digits: string[] = $state([...initialDigits]);
 
     // References to each input element for focus management
     let inputRefs: HTMLInputElement[] = $state([]);
@@ -93,6 +106,32 @@
     });
 
     // Handle input events on individual digit fields
+    // Form reset: the digit inputs use a one-way `value`, which a reset clears
+    // without telling this component, so `value` would keep digits the fields no
+    // longer show. Restore the initial digits instead — one tick later, after the
+    // browser has reset the DOM, and not when the reset was cancelled.
+    let root: HTMLDivElement | undefined = $state();
+    $effect(() => {
+        const form = root?.closest("form");
+        if (!form) return;
+        let timer: ReturnType<typeof setTimeout> | undefined;
+        const onReset = (event: Event) => {
+            clearTimeout(timer);
+            timer = setTimeout(() => {
+                if (event.defaultPrevented) return;
+                digits = [...initialDigits];
+                inputRefs.forEach((input, i) => {
+                    if (input) input.value = initialDigits[i];
+                });
+            }, 0);
+        };
+        form.addEventListener("reset", onReset);
+        return () => {
+            clearTimeout(timer);
+            form.removeEventListener("reset", onReset);
+        };
+    });
+
     function handleInput(index: number, event: Event): void {
         const target = event.target as HTMLInputElement;
         const inputValue = target.value;
@@ -137,6 +176,7 @@
 
 <!-- PinInputDiv.svelte -->
 <div
+    bind:this={root}
     class={`pin-input-div ${className}`}
     role="group"
     aria-label={label}
@@ -148,7 +188,7 @@
             type="text"
             inputmode="numeric"
             maxlength="1"
-            aria-label={`Digit ${index + 1} of ${length}`}
+            aria-label={digitLabel ? digitLabel(index + 1, length) : label}
             value={digits[index]}
             {disabled}
             oninput={(e) => handleInput(index, e)}

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

@@ -3,6 +3,11 @@ type $$ComponentProps = {
     label: string;
     /** Number of digit inputs to render */
     length?: number;
+    /**
+     * Each digit input's accessible name, e.g. (n, of) => `Digit ${n} of ${of}`.
+     * Without it each input is named by `label`: no English default.
+     */
+    digitLabel?: (position: number, length: number) => string;
     /** Combined string of all entered digits, bindable */
     value?: string;
     /** Whether all inputs are disabled */

package/dist/components/RingChart/RingChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // RingChart component
+    //
+    // A headless chart container for a pie chart with a hollow centre, often used to show progress or a share of a total. The consumer supplies the inline
+    // svg as `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, optional. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="ring-chart">
+    //     <div class="ring-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="ring-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label?: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RingChart.svelte -->
+<figure
+    class={`ring-chart ${className}`}
+    {...restProps}
+>
+    <div class="ring-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="ring-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label?: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const RingChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type RingChart = ReturnType<typeof RingChart>;
+export default RingChart;

package/dist/components/StreamingText/StreamingText.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // StreamingText component
+    //
+    // A polite live region for text that grows over time. While `streaming` is true the region is marked busy (`aria-busy="true"`, `data-streaming="true"`) so assistive technology waits instead of announcing every chunk; when it flips to false the finished text is announced once (`role="status"`, `aria-live="polite"`, `aria-atomic="true"`). The component never splits, times, reveals or animates the text: the consumer appends chunks to the children, and owns any caret or reduced-motion CSS.
+    //
+    // Props:
+    //   class — string, optional. CSS class name.
+    //   label — string, optional. Accessible name of the status region.
+    //   streaming — boolean, default false. True while chunks are still arriving.
+    //   children — Snippet. The text so far.
+    //   ...restProps — additional HTML attributes spread onto the root <div>.
+    //
+    // Keyboard: none.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no animation, no timing, no hardcoded strings
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        streaming = false,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name of the region. */
+        label?: string;
+        /** Whether text is still arriving. */
+        streaming?: boolean;
+        /** The text so far. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- StreamingText.svelte -->
+<div
+    class={`streaming-text ${className}`}
+    role="status"
+    aria-live="polite"
+    aria-atomic="true"
+    aria-label={label}
+    aria-busy={streaming ? "true" : undefined}
+    data-streaming={streaming ? "true" : undefined}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name of the region. */
+    label?: string;
+    /** Whether text is still arriving. */
+    streaming?: boolean;
+    /** The text so far. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const StreamingText: import("svelte").Component<$$ComponentProps, {}, "">;
+type StreamingText = ReturnType<typeof StreamingText>;
+export default StreamingText;

package/dist/components/SunburstChart/SunburstChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // SunburstChart component
+    //
+    // A headless chart container for a radial chart showing a hierarchy as concentric rings of arcs. The consumer supplies the inline
+    // svg as `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, optional. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="sunburst-chart">
+    //     <div class="sunburst-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="sunburst-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label?: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SunburstChart.svelte -->
+<figure
+    class={`sunburst-chart ${className}`}
+    {...restProps}
+>
+    <div class="sunburst-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="sunburst-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label?: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const SunburstChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type SunburstChart = ReturnType<typeof SunburstChart>;
+export default SunburstChart;

package/dist/components/Tag/Tag.svelte

@@ -47,11 +47,18 @@
     let {
         class: className = "",
         label,
+        live = false,
         children,
         ...restProps
     }: {
         /** Accessible label for screen readers */
         label: string;
+        /**
+         * Announce changes: a `role="status"` live region, for a tag whose text
+         * changes in place (a job's status). Off by default — a page of static
+         * tags should not be a page of live regions.
+         */
+        live?: boolean;
         /** The tag content (text, icon, etc.) */
         children: Snippet;
         /** Additional HTML attributes */
@@ -60,11 +67,16 @@
 </script>
 
 <!-- Tag.svelte -->
-<span
-    class={`tag ${className}`}
-    role="status"
-    aria-label={label}
-    {...restProps}
->
-    {@render children?.()}
-</span>
+{#if live}
+    <span class={`tag ${className}`} role="status" aria-label={label} {...restProps}>
+        {@render children?.()}
+    </span>
+{:else}
+    <!-- Not a live region: aria-label is not allowed on a plain <span>, so the
+         label is screen-reader text appended after the content (the themes hide
+         .screen-reader-span). The content stays exposed: it may hold a focusable
+         control, such as a remove button. -->
+    <span class={`tag ${className}`} {...restProps}>
+        {@render children?.()}{#if label}<span class="screen-reader-span">{label}</span>{/if}
+    </span>
+{/if}

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

@@ -2,6 +2,12 @@ import type { Snippet } from "svelte";
 type $$ComponentProps = {
     /** Accessible label for screen readers */
     label: string;
+    /**
+     * Announce changes: a `role="status"` live region, for a tag whose text
+     * changes in place (a job's status). Off by default — a page of static
+     * tags should not be a page of live regions.
+     */
+    live?: boolean;
     /** The tag content (text, icon, etc.) */
     children: Snippet;
     /** Additional HTML attributes */

package/dist/components/ToolCall/ToolCall.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    // ToolCall component
+    //
+    // A headless disclosure for one tool invocation, built on the native <details>. Closed by default. The `summary` content (typically ToolCallName and ToolCallStatus) goes inside <summary class="tool-call-summary">; the body (ToolCallInput, ToolCallOutput, ToolCallError) goes inside <div class="tool-call-content">. `status` (pending | running | done | error) sets data-status on the root, and aria-busy="true" only while running. The component never animates, times or opens itself: the consumer owns `open` (open it on error so ToolCallError is not hidden) and any spinner/animation CSS.
+    //
+    // Props:
+    //   class — string, optional. CSS class name.
+    //   status — string, optional. pending | running | done | error. No default.
+    //   open — boolean, default false. Bindable.
+    //   summary — Snippet. The summary content (name + status words).
+    //   children — Snippet. The body.
+    //   ...restProps — additional HTML attributes spread onto the root <details>.
+    //
+    // Keyboard: Enter / Space on the native <summary> toggles.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no animation, no hardcoded strings
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        status = undefined,
+        open = $bindable(false),
+        summary,
+        children,
+        ...restProps
+    }: {
+        /** pending | running | done | error. */
+        status?: string;
+        /** Whether open. Bindable. */
+        open?: boolean;
+        /** Summary content. */
+        summary?: Snippet;
+        /** Body content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ToolCall.svelte -->
+<details
+    class={`tool-call ${className}`}
+    bind:open
+    data-status={status}
+    aria-busy={status === "running" ? "true" : undefined}
+    {...restProps}
+>
+    <summary class="tool-call-summary">
+        {@render summary?.()}
+    </summary>
+    <div class="tool-call-content">
+        {@render children?.()}
+    </div>
+</details>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** pending | running | done | error. */
+    status?: string;
+    /** Whether open. Bindable. */
+    open?: boolean;
+    /** Summary content. */
+    summary?: Snippet;
+    /** Body content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ToolCall: import("svelte").Component<$$ComponentProps, {}, "open">;
+type ToolCall = ReturnType<typeof ToolCall>;
+export default ToolCall;

package/dist/components/ToolCallError/ToolCallError.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    // ToolCallError component
+    //
+    // A headless inner part of ToolCall: the error shown when a tool call fails. Contract: `role="alert"` announces the error when it appears (open the tool call on error so it is not hidden inside a closed `<details>`).
+    // Draws nothing and carries no strings of its own; the consumer supplies the text.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ToolCallError.svelte -->
+<div
+    class={`tool-call-error ${className}`}
+    role="alert"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/ToolCallInput/ToolCallInput.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    // ToolCallInput component
+    //
+    // A headless inner part of ToolCall: the input or arguments passed to a tool in a tool call. Contract: `label` (optional) sets `role="group"` and `aria-label`; without it neither is rendered.
+    // Draws nothing and carries no strings of its own; the consumer supplies the text.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name of the group. */
+        label?: string;
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ToolCallInput.svelte -->
+<div
+    class={`tool-call-input ${className}`}
+    role={label ? "group" : undefined}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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