@lilydesignsystem/svelte-headless 0.3.0 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+## 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/FunnelChart/FunnelChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // FunnelChart component
+    //
+    // A headless chart container for a chart of stages narrowing from top to bottom, showing how a quantity drops at each step. 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="funnel-chart">
+    //     <div class="funnel-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="funnel-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>
+
+<!-- FunnelChart.svelte -->
+<figure
+    class={`funnel-chart ${className}`}
+    {...restProps}
+>
+    <div class="funnel-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="funnel-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

package/dist/components/Mark/Mark.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    // Mark component
+    //
+    // A headless inline wrapper: an inline highlight marking text as relevant or referenced, such as a search match, using the native mark element. Contract: a plain wrapper with the base class and children.
+    // 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>
+
+<!-- Mark.svelte -->
+<mark
+    class={`mark ${className}`}
+
+    {...restProps}
+>
+    {@render children?.()}
+</mark>

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

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

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/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;