@lilydesignsystem/svelte-headless 0.2.0 → 0.4.0

package/dist/components/BrasilCartaoNacionalDeSaudeView/BrasilCartaoNacionalDeSaudeView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // BrasilCartaoNacionalDeSaudeView component
+    //
+    // A headless display component for showing Brazil's
+    // Cartão Nacional de Saúde (CNS) in a read-only format.
+    // Format: Fifteen-digit number issued by Brazil's Sistema Único de Saúde (SUS), grouped as NNN NNNN NNNN NNNN. Numbers starting 1 or 2 are definitive (linked to the national civil registry); numbers starting 7, 8, or 9 are provisional. Both forms are validated with a weighted-sum Modulus-11 check across all 15 digits.
+    //
+    // 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:
+    //   <BrasilCartaoNacionalDeSaudeView label="Cartão Nacional de Saúde (CNS)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/CPF_number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- BrasilCartaoNacionalDeSaudeView.svelte -->
+<span
+    class={`brasil-cartao-nacional-de-saude-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/CalendarDayTable/CalendarDayTable.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    // CalendarDayTable component
+    //
+    // A calendar grid for a grid of the time slots of one day: one row per slot. A structural wrapper like CalendarTable:
+    // a <table> with role="grid" and data-view="day"; the consumer supplies the
+    // head, body and rows by reusing the CalendarTable* sub-elements.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name describing the period shown, e.g. a day (e.g. "Monday 6 January 2025").
+    //   caption — string, optional. Visible caption text displayed above the table.
+    //   children — Snippet, required. CalendarTableHead, CalendarTableBody, CalendarTableFoot elements.
+    //   ...restProps — additional HTML attributes spread onto the <table>.
+    //
+    // Syntax:
+    //   <CalendarDayTable label="Monday 6 January 2025">
+    //     <CalendarTableBody>...</CalendarTableBody>
+    //   </CalendarDayTable>
+    //
+    // Keyboard:
+    //   None built-in — consumer implements grid keyboard navigation
+    //   (arrow keys for cell movement, Enter/Space for selection).
+    //
+    // Accessibility:
+    //   - role="grid" identifies the table as an interactive grid widget
+    //   - aria-label provides an accessible name describing the period
+    //   - data-view="day" lets consumer CSS and JS key on the view
+    //
+    // Internationalization:
+    //   - label and caption supply all text; locale formatting (Intl) and cell
+    //     content are the consumer's concern
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Reuse the CalendarTable* sub-elements; there are no CalendarDayTable* sub-elements
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        caption = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name describing the period shown. */
+        label: string;
+        /** Visible caption for the table. */
+        caption?: string;
+        /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- CalendarDayTable.svelte -->
+<table
+    class={`calendar-day-table ${className}`}
+    role="grid"
+    aria-label={label}
+    data-view="day"
+    {...restProps}
+>
+    {#if caption}
+        <caption>{caption}</caption>
+    {/if}
+    {@render children?.()}
+</table>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name describing the period shown. */
+    label: string;
+    /** Visible caption for the table. */
+    caption?: string;
+    /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const CalendarDayTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarDayTable = ReturnType<typeof CalendarDayTable>;
+export default CalendarDayTable;

package/dist/components/CalendarMonthTable/CalendarMonthTable.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    // CalendarMonthTable component
+    //
+    // A calendar grid for a grid of the days of one month: week rows by seven day columns. A structural wrapper like CalendarTable:
+    // a <table> with role="grid" and data-view="month"; the consumer supplies the
+    // head, body and rows by reusing the CalendarTable* sub-elements.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name describing the period shown, e.g. a month (e.g. "January 2025").
+    //   caption — string, optional. Visible caption text displayed above the table.
+    //   children — Snippet, required. CalendarTableHead, CalendarTableBody, CalendarTableFoot elements.
+    //   ...restProps — additional HTML attributes spread onto the <table>.
+    //
+    // Syntax:
+    //   <CalendarMonthTable label="January 2025">
+    //     <CalendarTableBody>...</CalendarTableBody>
+    //   </CalendarMonthTable>
+    //
+    // Keyboard:
+    //   None built-in — consumer implements grid keyboard navigation
+    //   (arrow keys for cell movement, Enter/Space for selection).
+    //
+    // Accessibility:
+    //   - role="grid" identifies the table as an interactive grid widget
+    //   - aria-label provides an accessible name describing the period
+    //   - data-view="month" lets consumer CSS and JS key on the view
+    //
+    // Internationalization:
+    //   - label and caption supply all text; locale formatting (Intl) and cell
+    //     content are the consumer's concern
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Reuse the CalendarTable* sub-elements; there are no CalendarMonthTable* sub-elements
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        caption = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name describing the period shown. */
+        label: string;
+        /** Visible caption for the table. */
+        caption?: string;
+        /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- CalendarMonthTable.svelte -->
+<table
+    class={`calendar-month-table ${className}`}
+    role="grid"
+    aria-label={label}
+    data-view="month"
+    {...restProps}
+>
+    {#if caption}
+        <caption>{caption}</caption>
+    {/if}
+    {@render children?.()}
+</table>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name describing the period shown. */
+    label: string;
+    /** Visible caption for the table. */
+    caption?: string;
+    /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const CalendarMonthTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarMonthTable = ReturnType<typeof CalendarMonthTable>;
+export default CalendarMonthTable;

package/dist/components/CalendarWeekTable/CalendarWeekTable.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    // CalendarWeekTable component
+    //
+    // A calendar grid for a grid of the seven days of one week as day columns. A structural wrapper like CalendarTable:
+    // a <table> with role="grid" and data-view="week"; the consumer supplies the
+    // head, body and rows by reusing the CalendarTable* sub-elements.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name describing the period shown, e.g. a week (e.g. "Week of 6 January 2025").
+    //   caption — string, optional. Visible caption text displayed above the table.
+    //   children — Snippet, required. CalendarTableHead, CalendarTableBody, CalendarTableFoot elements.
+    //   ...restProps — additional HTML attributes spread onto the <table>.
+    //
+    // Syntax:
+    //   <CalendarWeekTable label="Week of 6 January 2025">
+    //     <CalendarTableBody>...</CalendarTableBody>
+    //   </CalendarWeekTable>
+    //
+    // Keyboard:
+    //   None built-in — consumer implements grid keyboard navigation
+    //   (arrow keys for cell movement, Enter/Space for selection).
+    //
+    // Accessibility:
+    //   - role="grid" identifies the table as an interactive grid widget
+    //   - aria-label provides an accessible name describing the period
+    //   - data-view="week" lets consumer CSS and JS key on the view
+    //
+    // Internationalization:
+    //   - label and caption supply all text; locale formatting (Intl) and cell
+    //     content are the consumer's concern
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Reuse the CalendarTable* sub-elements; there are no CalendarWeekTable* sub-elements
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        caption = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name describing the period shown. */
+        label: string;
+        /** Visible caption for the table. */
+        caption?: string;
+        /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- CalendarWeekTable.svelte -->
+<table
+    class={`calendar-week-table ${className}`}
+    role="grid"
+    aria-label={label}
+    data-view="week"
+    {...restProps}
+>
+    {#if caption}
+        <caption>{caption}</caption>
+    {/if}
+    {@render children?.()}
+</table>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name describing the period shown. */
+    label: string;
+    /** Visible caption for the table. */
+    caption?: string;
+    /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const CalendarWeekTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarWeekTable = ReturnType<typeof CalendarWeekTable>;
+export default CalendarWeekTable;

package/dist/components/CalendarYearTable/CalendarYearTable.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+    // CalendarYearTable component
+    //
+    // A calendar grid for a grid of the twelve months of one year (typically 3 x 4 or 4 x 3 month cells). A structural wrapper like CalendarTable:
+    // a <table> with role="grid" and data-view="year"; the consumer supplies the
+    // head, body and rows by reusing the CalendarTable* sub-elements.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name describing the period shown, e.g. a year (e.g. "2025").
+    //   caption — string, optional. Visible caption text displayed above the table.
+    //   children — Snippet, required. CalendarTableHead, CalendarTableBody, CalendarTableFoot elements.
+    //   ...restProps — additional HTML attributes spread onto the <table>.
+    //
+    // Syntax:
+    //   <CalendarYearTable label="2025">
+    //     <CalendarTableBody>...</CalendarTableBody>
+    //   </CalendarYearTable>
+    //
+    // Keyboard:
+    //   None built-in — consumer implements grid keyboard navigation
+    //   (arrow keys for cell movement, Enter/Space for selection).
+    //
+    // Accessibility:
+    //   - role="grid" identifies the table as an interactive grid widget
+    //   - aria-label provides an accessible name describing the period
+    //   - data-view="year" lets consumer CSS and JS key on the view
+    //
+    // Internationalization:
+    //   - label and caption supply all text; locale formatting (Intl) and cell
+    //     content are the consumer's concern
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Reuse the CalendarTable* sub-elements; there are no CalendarYearTable* sub-elements
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        caption = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name describing the period shown. */
+        label: string;
+        /** Visible caption for the table. */
+        caption?: string;
+        /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- CalendarYearTable.svelte -->
+<table
+    class={`calendar-year-table ${className}`}
+    role="grid"
+    aria-label={label}
+    data-view="year"
+    {...restProps}
+>
+    {#if caption}
+        <caption>{caption}</caption>
+    {/if}
+    {@render children?.()}
+</table>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name describing the period shown. */
+    label: string;
+    /** Visible caption for the table. */
+    caption?: string;
+    /** CalendarTableHead, CalendarTableBody, CalendarTableFoot elements. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const CalendarYearTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type CalendarYearTable = ReturnType<typeof CalendarYearTable>;
+export default CalendarYearTable;

package/dist/components/CanadaSocialInsuranceNumberInput/CanadaSocialInsuranceNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // CanadaSocialInsuranceNumberInput component
+    //
+    // A headless input for entering Canada's Social Insurance Number (SIN).
+    // Format: Nine digits, usually displayed in three groups of three (NNN NNN NNN). The leading digit denotes the region of registration (1 Atlantic, 2-3 Quebec, 4-5 Ontario, 6 Prairies, 7 Pacific, 9 temporary residents), the following seven digits are a serial number, and the final digit is a Luhn (Modulus-10) check digit over the first eight.
+    //
+    // 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:
+    //   <CanadaSocialInsuranceNumberInput label="Social Insurance Number (SIN)" 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/Social_Insurance_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>
+
+<!-- CanadaSocialInsuranceNumberInput.svelte -->
+<input
+    class={`canada-social-insurance-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/CanadaSocialInsuranceNumberView/CanadaSocialInsuranceNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // CanadaSocialInsuranceNumberView component
+    //
+    // A headless display component for showing Canada's
+    // Social Insurance Number (SIN) in a read-only format.
+    // Format: Nine digits, usually displayed in three groups of three (NNN NNN NNN). The leading digit denotes the region of registration (1 Atlantic, 2-3 Quebec, 4-5 Ontario, 6 Prairies, 7 Pacific, 9 temporary residents), the following seven digits are a serial number, and the final digit is a Luhn (Modulus-10) check digit over the first eight.
+    //
+    // 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:
+    //   <CanadaSocialInsuranceNumberView label="Social Insurance Number (SIN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Social_Insurance_Number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- CanadaSocialInsuranceNumberView.svelte -->
+<span
+    class={`canada-social-insurance-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

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;