@lilydesignsystem/svelte-headless 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+## 0.5.0 — 2026-10-14 (scrollspy, link counts)
+
+- `ContentsNav` gains scrollspy (`spy`): the link of the section in view gets `aria-current` and `data-active`. Props `spy`, `offset`, `root`, `current`, bindable `active`, `onActiveChange`.
+- `ContentsLink` gains `count` and `countLabel`: a visible, localised count inside the link, with `data-count` (and `data-complete` at 0). The Svelte `ContentsLink` is now a real `<a>` (it was a placeholder `<div>`).
+
+## Unreleased — 2026-10-11 (labels and contracts)
+
+`PinInputDiv` takes `digitLabel` and no longer names its boxes in English; `FiveStarRatingPicker` takes `starLabel`; `FiveFaceRatingPicker` / `FiveFaceRatingView` default their labels to the numbers. `Tag` is not a live region unless `live` is set. The form-reset fixes listed above now also reach `components/`, which the build publishes. See the repository CHANGELOG (2026-10-11).
+
+## Unreleased — 2026-10-11
+
+Fixed: `FiveStarRatingPicker`, `FiveFaceRatingPicker`, `NetPromoterScorePicker` and `PinInputDiv` restore their initial value when their `<form>` is reset (one tick after `reset`, unless it is
+cancelled); before, a reset changed the inputs without telling the component, so its value disagreed with what the
+form showed or submitted. `PinInputDiv` also now shows its initial `value` instead of overwriting it with an empty string on mount.
+
+## 0.4.0 — 2026-10-06
+
+**16 new components (catalog 555 → 571); no breaking changes.**
+Seven charts built with the graphic + optional data-table structure
+introduced in the previous release: `pie-chart`, `ring-chart`,
+`funnel-chart`, `candlestick-chart`, `composed-chart`, `choropleth-chart`,
+`sunburst-chart`. `streaming-text` (a polite, atomic status region that goes
+busy while text arrives, then announces the finished text once). `tool-call`
+(a native `<details>` with `status`) and its inner parts `tool-call-name`,
+`tool-call-status`, `tool-call-input`, `tool-call-output`, `tool-call-error`.
+`mark` (the native `<mark>` highlight). `chat-composer` (a chat input form:
+growing textarea, Enter sends, Shift+Enter inserts a line break, IME-safe, one
+button that is send or stop). See the monorepo CHANGELOG for the full record
+and the per-library deviations (Blazor: no plain-Enter send; Nunjucks and
+HTML: markup-only `chat-composer`).
+
 ## 0.3.0 — 2026-10-05
 
 **16 new components (catalog 539 → 555) and a breaking chart change.**

package/dist/components/CandlestickChart/CandlestickChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // CandlestickChart component
+    //
+    // A headless chart container for a financial chart showing open, high, low and close values for each period as candles. 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="candlestick-chart">
+    //     <div class="candlestick-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="candlestick-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>
+
+<!-- CandlestickChart.svelte -->
+<figure
+    class={`candlestick-chart ${className}`}
+    {...restProps}
+>
+    <div class="candlestick-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="candlestick-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

package/dist/components/CandlestickChart/CandlestickChart.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 CandlestickChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type CandlestickChart = ReturnType<typeof CandlestickChart>;
+export default CandlestickChart;

package/dist/components/ChatComposer/ChatComposer.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    // ChatComposer component
+    //
+    // A headless chat input form: a <textarea> that grows with its content (rows from the number of lines, clamped between minRows and maxRows) and ONE button that is "send" normally and turns into "stop" while `busy`. Enter sends; Shift+Enter inserts a line break; Enter while an IME composition is in progress does nothing. The send button is disabled, never hidden, when the text is empty or the form is disabled. The component never clears the text (the consumer does, in its send handler), never animates, and carries no strings: the textarea name, the send word and the stop word are required props. Models, attachments and menus are consumer composition (put them in the default slot, rendered before the textarea).
+    //
+    // Props:
+    //   class — string, optional. CSS class name.
+    //   label — string, required. Accessible name of the textarea.
+    //   sendLabel — string, required. Visible/accessible word for the send button.
+    //   stopLabel — string, required. Visible/accessible word for the stop button.
+    //   value — string, default "". Bindable.
+    //   placeholder, name — optional, passed to the textarea.
+    //   minRows — number, default 1. maxRows — number, default 8.
+    //   busy — boolean, default false. A reply is in progress: the button becomes "stop".
+    //   disabled — boolean, default false.
+    //   onSend(value) — called on Enter or submit when there is text and not busy/disabled.
+    //   onStop() — called when the stop button is pressed.
+    //   children — Snippet, optional. Rendered inside the form, before the textarea.
+    //   ...restProps — additional HTML attributes spread onto the root <form>.
+    //
+    // Keyboard: Enter sends; Shift+Enter inserts a line break; Enter during IME composition is ignored.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles, no animation, no hardcoded strings
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        sendLabel,
+        stopLabel,
+        value = $bindable(""),
+        placeholder = undefined,
+        name = undefined,
+        minRows = 1,
+        maxRows = 8,
+        busy = false,
+        disabled = false,
+        onSend,
+        onStop,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name of the textarea. */
+        label: string;
+        /** Word for the send button. */
+        sendLabel: string;
+        /** Word for the stop button. */
+        stopLabel: string;
+        /** The text. Bindable. */
+        value?: string;
+        placeholder?: string;
+        name?: string;
+        minRows?: number;
+        maxRows?: number;
+        /** A reply is in progress. */
+        busy?: boolean;
+        disabled?: boolean;
+        onSend?: (value: string) => void;
+        onStop?: () => void;
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const empty = $derived(value.trim() === "");
+    const rows = $derived(Math.min(maxRows, Math.max(minRows, value.split("\n").length)));
+
+    function trySend(): void {
+        if (disabled || busy || empty) return;
+        onSend?.(value);
+    }
+
+    function onKeydown(event: KeyboardEvent): void {
+        if (event.key !== "Enter") return;
+        if (event.shiftKey || event.ctrlKey || event.altKey || event.metaKey) return;
+        // IME: Enter that confirms a composition must not send.
+        if (event.isComposing || event.keyCode === 229) return;
+        event.preventDefault();
+        trySend();
+    }
+
+    function onSubmit(event: SubmitEvent): void {
+        event.preventDefault();
+        trySend();
+    }
+</script>
+
+<!-- ChatComposer.svelte -->
+<form class={`chat-composer ${className}`} onsubmit={onSubmit} {...restProps}>
+    {@render children?.()}
+    <textarea
+        class="chat-composer-input"
+        aria-label={label}
+        bind:value
+        {rows}
+        {placeholder}
+        {name}
+        {disabled}
+        onkeydown={onKeydown}
+    ></textarea>
+    <button
+        class="chat-composer-button"
+        type={busy ? "button" : "submit"}
+        data-state={busy ? "stop" : "send"}
+        disabled={disabled || (!busy && empty)}
+        onclick={busy ? () => onStop?.() : undefined}
+    >
+        <span class="chat-composer-button-label">{busy ? stopLabel : sendLabel}</span>
+    </button>
+</form>

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

@@ -0,0 +1,25 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name of the textarea. */
+    label: string;
+    /** Word for the send button. */
+    sendLabel: string;
+    /** Word for the stop button. */
+    stopLabel: string;
+    /** The text. Bindable. */
+    value?: string;
+    placeholder?: string;
+    name?: string;
+    minRows?: number;
+    maxRows?: number;
+    /** A reply is in progress. */
+    busy?: boolean;
+    disabled?: boolean;
+    onSend?: (value: string) => void;
+    onStop?: () => void;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ChatComposer: import("svelte").Component<$$ComponentProps, {}, "value">;
+type ChatComposer = ReturnType<typeof ChatComposer>;
+export default ChatComposer;

package/dist/components/ChoroplethChart/ChoroplethChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // ChoroplethChart component
+    //
+    // A headless chart container for a map chart that shades regions by the value of a measure. 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="choropleth-chart">
+    //     <div class="choropleth-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="choropleth-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>
+
+<!-- ChoroplethChart.svelte -->
+<figure
+    class={`choropleth-chart ${className}`}
+    {...restProps}
+>
+    <div class="choropleth-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="choropleth-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

package/dist/components/ChoroplethChart/ChoroplethChart.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 ChoroplethChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChoroplethChart = ReturnType<typeof ChoroplethChart>;
+export default ChoroplethChart;

package/dist/components/ComposedChart/ComposedChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // ComposedChart component
+    //
+    // A headless chart container for a chart that combines several chart types, such as bars and a line, on shared axes. 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="composed-chart">
+    //     <div class="composed-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="composed-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>
+
+<!-- ComposedChart.svelte -->
+<figure
+    class={`composed-chart ${className}`}
+    {...restProps}
+>
+    <div class="composed-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="composed-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

package/dist/components/ComposedChart/ComposedChart.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 ComposedChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type ComposedChart = ReturnType<typeof ComposedChart>;
+export default ComposedChart;

package/dist/components/ContentsLink/ContentsLink.svelte

@@ -1,18 +1,52 @@
 <script lang="ts">
+    // ContentsLink component
+    //
+    // One table of contents link: an <a href> to a page section, with an optional count (for example
+    // of tasks to do in that section).
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   href — string, default "#". The link target.
+    //   label — string, optional. aria-label override. It replaces the link's whole accessible name, so
+    //     if you also show a count, include the count in it.
+    //   count — number, optional. Sets data-count on the link (and data-complete when 0), as CSS hooks.
+    //   countLabel — string, optional. Visible, localised count text (e.g. "3 to do"), rendered inside
+    //     the link after the text so the link's accessible name includes it. No default, no English.
+    //   children — Snippet, required. The link text.
+    //   ...restProps — additional HTML attributes spread onto the <a>.
+    //
+    // Accessibility:
+    //   - The count is text inside the link, never colour alone (WCAG 1.4.1).
+
     import type { Snippet } from "svelte";
+
     let {
         class: className = "",
         label = undefined,
+        href = "#",
+        count = undefined,
+        countLabel = undefined,
         children,
         ...restProps
     }: {
         label?: string;
+        href?: string;
+        count?: number;
+        countLabel?: string;
         children: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- ContentsLink.svelte -->
-<div class={`contents-link ${className}`} aria-label={label} {...restProps}>
+<a
+    class={`contents-link ${className}`}
+    {href}
+    aria-label={label}
+    data-count={count}
+    data-complete={count === 0 ? "" : undefined}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+    {#if countLabel}<span class="contents-link-count">{countLabel}</span>{/if}
+</a>

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

@@ -1,6 +1,9 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
     label?: string;
+    href?: string;
+    count?: number;
+    countLabel?: string;
     children: Snippet;
     [key: string]: unknown;
 };