@lilydesignsystem/svelte-headless 0.2.0 → 0.4.0

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

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // ChileRolUnicoNacionalInput component
+    //
+    // A headless input for entering Chile's Rol Único Nacional (RUN).
+    // Format: Seven or eight digits plus a trailing check character. The check character is computed with a Modulus-11 algorithm: each body digit, read right to left, is multiplied by a repeating weight sequence 2,3,4,5,6,7; the products are summed; the check value is 11 minus the sum's Modulus-11 remainder, where a result of 11 maps to 0 and a result of 10 maps to the letter K.
+    //
+    // 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:
+    //   <ChileRolUnicoNacionalInput label="Rol Único Nacional (RUN)" 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/RUT
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ChileRolUnicoNacionalInput.svelte -->
+<input
+    class={`chile-rol-unico-nacional-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/ChileRolUnicoNacionalView/ChileRolUnicoNacionalView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // ChileRolUnicoNacionalView component
+    //
+    // A headless display component for showing Chile's
+    // Rol Único Nacional (RUN) in a read-only format.
+    // Format: Seven or eight digits plus a trailing check character. The check character is computed with a Modulus-11 algorithm: each body digit, read right to left, is multiplied by a repeating weight sequence 2,3,4,5,6,7; the products are summed; the check value is 11 minus the sum's Modulus-11 remainder, where a result of 11 maps to 0 and a result of 10 maps to the letter K.
+    //
+    // 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:
+    //   <ChileRolUnicoNacionalView label="Rol Único Nacional (RUN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/RUT
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ChileRolUnicoNacionalView.svelte -->
+<span
+    class={`chile-rol-unico-nacional-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

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

@@ -1,14 +1,48 @@
 <script lang="ts">
+    // ColumnChart component
+    //
+    // A headless chart container for a vertical column chart visualization for displaying data. 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="column-chart">
+    //     <div class="column-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="column-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>
@@ -16,9 +50,14 @@
 <!-- ColumnChart.svelte -->
 <figure
     class={`column-chart ${className}`}
-    role="img"
-    aria-label={label}
     {...restProps}
 >
-    {@render children?.()}
+    <div class="column-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="column-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
 </figure>

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

@@ -1,7 +1,11 @@
 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 ColumnChart: import("svelte").Component<$$ComponentProps, {}, "">;

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+    // EmptyState component
+    //
+    // A headless container for the "nothing here yet" state of a list, table,
+    // search or inbox. The consumer supplies the heading, explanation and action
+    // as children; there is no icon and no default text.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, optional. When given, the root becomes role="group" with this aria-label.
+    //   children — Snippet. Heading, text, action.
+    //   ...restProps — additional HTML attributes spread onto the root <div>.
+    //
+    // Keyboard:
+    //   - None; any action inside is a native control
+    //
+    // Accessibility:
+    //   - role="group" + aria-label only when label is supplied; otherwise a plain <div>
+    //   - Not a live region: use InfoState (role="status") for announced states
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no icon, no hardcoded strings
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Optional accessible name; adds role="group". */
+        label?: string;
+        /** Heading, text and action supplied by the consumer. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EmptyState.svelte -->
+<div
+    class={`empty-state ${className}`}
+    role={label ? "group" : undefined}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Optional accessible name; adds role="group". */
+    label?: string;
+    /** Heading, text and action supplied by the consumer. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const EmptyState: import("svelte").Component<$$ComponentProps, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;