@lilydesignsystem/svelte-headless 0.1.0 → 0.3.0

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

package/dist/components/HangukJuminDeungnokBeonhoInput/HangukJuminDeungnokBeonhoInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // HangukJuminDeungnokBeonhoInput component
+    //
+    // A headless input for entering South Korea's Resident Registration Number (주민등록번호).
+    // Format: Thirteen digits, displayed as NNNNNN-NNNNNNN. The first six digits encode date of birth (YYMMDD); the seventh digit encodes sex and birth century; digits eight through eleven encode place of registration; the twelfth is a sequence number; the thirteenth is a Modulus-11 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:
+    //   <HangukJuminDeungnokBeonhoInput label="Resident Registration 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/Resident_registration_number
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HangukJuminDeungnokBeonhoInput.svelte -->
+<input
+    class={`hanguk-jumin-deungnok-beonho-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/HangukJuminDeungnokBeonhoView/HangukJuminDeungnokBeonhoView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // HangukJuminDeungnokBeonhoView component
+    //
+    // A headless display component for showing South Korea's
+    // Resident Registration Number (주민등록번호) in a read-only format.
+    // Format: Thirteen digits, displayed as NNNNNN-NNNNNNN. The first six digits encode date of birth (YYMMDD); the seventh digit encodes sex and birth century; digits eight through eleven encode place of registration; the twelfth is a sequence number; the thirteenth is a Modulus-11 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:
+    //   <HangukJuminDeungnokBeonhoView label="Resident Registration Number (주민등록번호)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Resident_registration_number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- HangukJuminDeungnokBeonhoView.svelte -->
+<span
+    class={`hanguk-jumin-deungnok-beonho-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/HeatmapChart/HeatmapChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // HeatmapChart component
+    //
+    // A headless chart container. 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, required. 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="heatmap-chart">
+    //     <div class="heatmap-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="heatmap-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,
+        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>
+
+<!-- HeatmapChart.svelte -->
+<figure
+    class={`heatmap-chart ${className}`}
+    {...restProps}
+>
+    <div class="heatmap-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="heatmap-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

package/dist/components/IconButton/IconButton.svelte

@@ -8,13 +8,21 @@
     //
     // Props:
     //   class — string, optional. CSS class appended to the base class.
+    //   baseClass — string, default "icon-button". The base class token itself
+    //     (not appended — replaces "icon-button" outright). A consumer that owns
+    //     its own exact class-hook contract (e.g. a picker component whose spec
+    //     requires `class="{helper}-button"` with no extra "icon-button" token)
+    //     sets this instead of layering on top of the default.
     //   label — string, REQUIRED. aria-label for screen readers.
     //   type — "button" | "submit" | "reset", default "button".
     //   disabled — boolean, default false.
     //   pressed — boolean | undefined, default undefined. Toggle button state.
     //   onclick — (event: MouseEvent) => void, optional. Click handler.
+    //   ref — HTMLButtonElement | undefined, bindable. The rendered button, for
+    //     a consumer that needs to call .focus() on it.
     //   children — Snippet, required. The icon content (svg, glyph, emoji).
-    //   ...restProps — additional HTML attributes spread onto the <button>.
+    //   ...restProps — additional HTML attributes spread onto the <button>
+    //     (e.g. aria-haspopup, aria-expanded, aria-controls, onkeydown).
     //
     // Syntax:
     //   <IconButton label="Close" onclick={handleClose}>×</IconButton>
@@ -45,14 +53,18 @@
 
     let {
         class: className = "",
+        baseClass = "icon-button",
         label,
         type = "button",
         disabled = false,
         pressed = undefined,
         onclick = undefined,
+        ref = $bindable<HTMLButtonElement | undefined>(undefined),
         children,
         ...restProps
     }: {
+        /** Base class token, replacing "icon-button" outright (not appended). */
+        baseClass?: string;
         /** Accessible label (REQUIRED for icon-only buttons) */
         label: string;
         /** HTML button type */
@@ -63,6 +75,8 @@
         pressed?: boolean;
         /** Click handler */
         onclick?: (event: MouseEvent) => void;
+        /** The rendered button element. Bindable. */
+        ref?: HTMLButtonElement;
         /** Icon content */
         children: Snippet;
         [key: string]: unknown;
@@ -71,12 +85,13 @@
 
 <!-- IconButton.svelte -->
 <button
-    class={`icon-button ${className}`}
+    class={`${baseClass} ${className}`}
     {type}
     {disabled}
     aria-label={label}
     aria-pressed={pressed}
     {onclick}
+    bind:this={ref}
     {...restProps}
 >
     {@render children?.()}

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

@@ -1,5 +1,7 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
+    /** Base class token, replacing "icon-button" outright (not appended). */
+    baseClass?: string;
     /** Accessible label (REQUIRED for icon-only buttons) */
     label: string;
     /** HTML button type */
@@ -10,10 +12,12 @@ type $$ComponentProps = {
     pressed?: boolean;
     /** Click handler */
     onclick?: (event: MouseEvent) => void;
+    /** The rendered button element. Bindable. */
+    ref?: HTMLButtonElement;
     /** Icon content */
     children: Snippet;
     [key: string]: unknown;
 };
-declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;

package/dist/components/IndonesiaNomorIndukKependudukanInput/IndonesiaNomorIndukKependudukanInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // IndonesiaNomorIndukKependudukanInput component
+    //
+    // A headless input for entering Indonesia's Nomor Induk Kependudukan (NIK).
+    // Format: Sixteen digits in the form PPKKCC-DDMMYY-NNNN: the first six digits encode province, regency/city, and sub-district of first registration; the next six encode date of birth (with 40 added to the day-of-month digits for a female holder, e.g. day 10 becomes 50); the final four digits are a sequence number disambiguating same-day-same-subdistrict registrations. No published check digit.
+    //
+    // 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:
+    //   <IndonesiaNomorIndukKependudukanInput label="Nomor Induk Kependudukan (NIK)" 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/National_identification_number#Indonesia
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- IndonesiaNomorIndukKependudukanInput.svelte -->
+<input
+    class={`indonesia-nomor-induk-kependudukan-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/IndonesiaNomorIndukKependudukanView/IndonesiaNomorIndukKependudukanView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // IndonesiaNomorIndukKependudukanView component
+    //
+    // A headless display component for showing Indonesia's
+    // Nomor Induk Kependudukan (NIK) in a read-only format.
+    // Format: Sixteen digits in the form PPKKCC-DDMMYY-NNNN: the first six digits encode province, regency/city, and sub-district of first registration; the next six encode date of birth (with 40 added to the day-of-month digits for a female holder, e.g. day 10 becomes 50); the final four digits are a sequence number disambiguating same-day-same-subdistrict registrations. No published check digit.
+    //
+    // 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:
+    //   <IndonesiaNomorIndukKependudukanView label="Nomor Induk Kependudukan (NIK)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_number#Indonesia
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- IndonesiaNomorIndukKependudukanView.svelte -->
+<span
+    class={`indonesia-nomor-induk-kependudukan-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/KbdShortcut/KbdShortcut.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+    // KbdShortcut component
+    //
+    // A headless keyboard shortcut: an outer <kbd> holding one inner <kbd> per key,
+    // with a decorative separator between keys. Use Kbd for a single key.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   keys — string[], required. The key names, in order, e.g. ["Ctrl", "K"].
+    //   separator — string, default "+". Decorative text between keys (aria-hidden).
+    //   label — string, optional. Spoken form; becomes aria-label on the root.
+    //   ...restProps — additional HTML attributes spread onto the root <kbd>.
+    //
+    // Keyboard:
+    //   - None; display only
+    //
+    // Accessibility:
+    //   - Separators are aria-hidden so screen readers read the keys
+    //   - label (optional) overrides the spoken form, e.g. "Control K"
+    //
+    // Internationalization:
+    //   - Key names are consumer-supplied; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no icons for keys
+
+    let {
+        class: className = "",
+        keys,
+        separator = "+",
+        label = undefined,
+        ...restProps
+    }: {
+        /** Key names, in order. */
+        keys: string[];
+        /** Decorative separator between keys. */
+        separator?: string;
+        /** Optional spoken form (aria-label). */
+        label?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- KbdShortcut.svelte -->
+<kbd class={`kbd-shortcut ${className}`} aria-label={label} {...restProps}>
+    {#each keys as key, i (i)}
+        {#if i > 0}<span class="kbd-shortcut-separator" aria-hidden="true">{separator}</span>{/if}<kbd class="kbd-shortcut-key">{key}</kbd>
+    {/each}
+</kbd>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    /** Key names, in order. */
+    keys: string[];
+    /** Decorative separator between keys. */
+    separator?: string;
+    /** Optional spoken form (aria-label). */
+    label?: string;
+    [key: string]: unknown;
+};
+declare const KbdShortcut: import("svelte").Component<$$ComponentProps, {}, "">;
+type KbdShortcut = ReturnType<typeof KbdShortcut>;
+export default KbdShortcut;

package/dist/components/LineChart/LineChart.svelte

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

package/dist/components/LineChart/LineChart.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 LineChart: import("svelte").Component<$$ComponentProps, {}, "">;