@lilydesignsystem/svelte-headless 0.2.0 → 0.4.0

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    [key: string]: unknown;
+};
+declare const SingaporeNationalRegistrationIdentityCardView: import("svelte").Component<$$ComponentProps, {}, "">;
+type SingaporeNationalRegistrationIdentityCardView = ReturnType<typeof SingaporeNationalRegistrationIdentityCardView>;
+export default SingaporeNationalRegistrationIdentityCardView;

package/dist/components/SouthAfricaIdentityNumberInput/SouthAfricaIdentityNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // SouthAfricaIdentityNumberInput component
+    //
+    // A headless input for entering South Africa's South African Identity Number.
+    // Format: Thirteen digits in the form YYMMDDSSSSCAZ: the first six encode date of birth; the next four encode sex (0000-4999 female, 5000-9999 male); the eleventh digit encodes citizenship status (0 citizen, 1 permanent resident, 2 refugee); the twelfth is a legacy field fixed at 8 on modern cards; the thirteenth is a Luhn (Modulus-10) check digit over the preceding twelve.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <SouthAfricaIdentityNumberInput label="South African Identity Number" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/South_African_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SouthAfricaIdentityNumberInput.svelte -->
+<input
+    class={`south-africa-identity-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    required?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const SouthAfricaIdentityNumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SouthAfricaIdentityNumberInput = ReturnType<typeof SouthAfricaIdentityNumberInput>;
+export default SouthAfricaIdentityNumberInput;

package/dist/components/SouthAfricaIdentityNumberView/SouthAfricaIdentityNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // SouthAfricaIdentityNumberView component
+    //
+    // A headless display component for showing South Africa's
+    // South African Identity Number in a read-only format.
+    // Format: Thirteen digits in the form YYMMDDSSSSCAZ: the first six encode date of birth; the next four encode sex (0000-4999 female, 5000-9999 male); the eleventh digit encodes citizenship status (0 citizen, 1 permanent resident, 2 refugee); the twelfth is a legacy field fixed at 8 on modern cards; the thirteenth is a Luhn (Modulus-10) check digit over the preceding twelve.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The identifier string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <SouthAfricaIdentityNumberView label="South African Identity Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/South_African_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SouthAfricaIdentityNumberView.svelte -->
+<span
+    class={`south-africa-identity-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,8 @@
+type $$ComponentProps = {
+    label: string;
+    value?: string;
+    [key: string]: unknown;
+};
+declare const SouthAfricaIdentityNumberView: import("svelte").Component<$$ComponentProps, {}, "">;
+type SouthAfricaIdentityNumberView = ReturnType<typeof SouthAfricaIdentityNumberView>;
+export default SouthAfricaIdentityNumberView;

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/Thinking/Thinking.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    // Thinking component
+    //
+    // A headless disclosure for an AI assistant's reasoning / "thinking" trace,
+    // built on the native <details>. Closed by default. While `streaming` the root
+    // carries data-streaming and aria-busy so consumer CSS/AT know it is still filling.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. The summary text. No default.
+    //   open — boolean, default false. Bindable.
+    //   streaming — boolean, default false. Adds data-streaming="true" + aria-busy="true" when true.
+    //   children — Snippet. The reasoning content.
+    //   ...restProps — additional HTML attributes spread onto the root <details>.
+    //
+    // Keyboard:
+    //   - Enter / Space on the native <summary> toggles
+    //
+    // Accessibility:
+    //   - Native details/summary semantics; aria-busy only while streaming
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no animation, no hardcoded strings
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        open = $bindable(false),
+        streaming = false,
+        children,
+        ...restProps
+    }: {
+        /** Summary text. */
+        label: string;
+        /** Whether open. Bindable. */
+        open?: boolean;
+        /** Whether content is still being produced. */
+        streaming?: boolean;
+        /** Reasoning content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Thinking.svelte -->
+<details
+    class={`thinking ${className}`}
+    bind:open
+    data-streaming={streaming ? "true" : undefined}
+    aria-busy={streaming ? "true" : undefined}
+    {...restProps}
+>
+    <summary class="thinking-summary">{label}</summary>
+    <div class="thinking-content">
+        {@render children?.()}
+    </div>
+</details>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Summary text. */
+    label: string;
+    /** Whether open. Bindable. */
+    open?: boolean;
+    /** Whether content is still being produced. */
+    streaming?: boolean;
+    /** Reasoning content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const Thinking: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Thinking = ReturnType<typeof Thinking>;
+export default Thinking;

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;

package/dist/components/ToolCallName/ToolCallName.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    // ToolCallName component
+    //
+    // A headless inner part of ToolCall: the name of the tool in a tool call, shown in the summary. 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>
+
+<!-- ToolCallName.svelte -->
+<span
+    class={`tool-call-name ${className}`}
+
+    {...restProps}
+>
+    {@render children?.()}
+</span>

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

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

package/dist/components/ToolCallOutput/ToolCallOutput.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    // ToolCallOutput component
+    //
+    // A headless inner part of ToolCall: the output or result returned by 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>
+
+<!-- ToolCallOutput.svelte -->
+<div
+    class={`tool-call-output ${className}`}
+    role={label ? "group" : undefined}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

package/dist/components/ToolCallStatus/ToolCallStatus.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    // ToolCallStatus component
+    //
+    // A headless inner part of ToolCall: the status of a tool call as a word, such as pending, running, done or error. Contract: `status` (optional) sets `data-status`; the visible status word is the children (consumer text, never colour alone).
+    // Draws nothing and carries no strings of its own; the consumer supplies the text.
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        status = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Status: pending, running, done or error. */
+        status?: string;
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ToolCallStatus.svelte -->
+<span
+    class={`tool-call-status ${className}`}
+    data-status={status}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Status: pending, running, done or error. */
+    status?: string;
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ToolCallStatus: import("svelte").Component<$$ComponentProps, {}, "">;
+type ToolCallStatus = ReturnType<typeof ToolCallStatus>;
+export default ToolCallStatus;