@lilydesignsystem/svelte-headless 0.2.0 → 0.3.0

package/CHANGELOG.md

@@ -3,6 +3,25 @@
 The format is loosely based on [Keep a Changelog](https://keepachangelog.com/)
 and the package follows [Semantic Versioning](https://semver.org/).
 
+## 0.3.0 — 2026-10-05
+
+**16 new components (catalog 539 → 555) and a breaking chart change.**
+New: `one-time-password-input`, `multi-select`, `multi-select-with-extras`,
+`empty-state`, `show-more`, `kbd-shortcut`, `calendar-year-table`,
+`calendar-month-table`, `calendar-week-table`, `calendar-day-table`,
+`thinking`, `gauge-chart`, `heatmap-chart`, `radar-chart`, `sankey-chart`,
+`file-tree`.
+
+**Breaking:** `area-chart`, `bar-chart`, `column-chart`, `line-chart` and
+`scatter-chart` (and the four new charts) now render `<figure
+class="{chart}">` holding a `<div class="{chart}-graphic" role="img"
+aria-label>` plus an optional sibling `<div class="{chart}-data-table">`.
+`role="img"` is no longer on the `<figure>`: a table inside a `role="img"`
+element is presentational and was unreachable to assistive technology.
+Consumer CSS or tests that targeted `figure[role=img]` must target
+`.{chart}-graphic`. `aria-describedby` passed as a rest prop still lands on
+the `<figure>`. See the monorepo CHANGELOG for the full record.
+
 ## 0.2.0 — 2026-09-21
 
 **`Listbox` and `IconButton` extended, additively, to support the

package/dist/components/AotearoaNationalHealthIndexInput/AotearoaNationalHealthIndexInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // AotearoaNationalHealthIndexInput component
+    //
+    // A headless input for entering New Zealand's National Health Index (NHI) Number.
+    // Format: Seven-character identifier (three letters, four digits). The legacy AAANNNC format uses a Modulus-11 check digit over the six preceding characters; an expanded AAANNAX format (issued from July 2026) uses a Modulus-23 check digit instead, to extend the identifier space.
+    //
+    // 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:
+    //   <AotearoaNationalHealthIndexInput label="National Health Index (NHI) 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/NHI_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>
+
+<!-- AotearoaNationalHealthIndexInput.svelte -->
+<input
+    class={`aotearoa-national-health-index-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/AotearoaNationalHealthIndexView/AotearoaNationalHealthIndexView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // AotearoaNationalHealthIndexView component
+    //
+    // A headless display component for showing New Zealand's
+    // National Health Index (NHI) Number in a read-only format.
+    // Format: Seven-character identifier (three letters, four digits). The legacy AAANNNC format uses a Modulus-11 check digit over the six preceding characters; an expanded AAANNAX format (issued from July 2026) uses a Modulus-23 check digit instead, to extend the identifier space.
+    //
+    // 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:
+    //   <AotearoaNationalHealthIndexView label="National Health Index (NHI) Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/NHI_Number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AotearoaNationalHealthIndexView.svelte -->
+<span
+    class={`aotearoa-national-health-index-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/AreaChart/AreaChart.svelte

@@ -1,14 +1,48 @@
 <script lang="ts">
+    // AreaChart component
+    //
+    // A headless chart container for an area chart visualization showing sized components in continuous 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="area-chart">
+    //     <div class="area-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="area-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 @@
 <!-- AreaChart.svelte -->
 <figure
     class={`area-chart ${className}`}
-    role="img"
-    aria-label={label}
     {...restProps}
 >
-    {@render children?.()}
+    <div class="area-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="area-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
 </figure>

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

package/dist/components/ArgentinaCodigoUnicoDeIdentificacionLaboralInput/ArgentinaCodigoUnicoDeIdentificacionLaboralInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // ArgentinaCodigoUnicoDeIdentificacionLaboralInput component
+    //
+    // A headless input for entering Argentina's Código Único de Identificación Laboral (CUIL).
+    // Format: Displayed as XX-NNNNNNNN-X: a two-digit prefix denoting registration type/sex (historically 20 male, 27 female, though this classification was discontinued in 2012), the eight-digit DNI (national identity document) number, and a Modulus-11 check digit computed over the ten preceding digits.
+    //
+    // 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:
+    //   <ArgentinaCodigoUnicoDeIdentificacionLaboralInput label="Código Único de Identificación Laboral (CUIL)" 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/C%C3%B3digo_%C3%9Anico_de_Identificaci%C3%B3n_Laboral
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ArgentinaCodigoUnicoDeIdentificacionLaboralInput.svelte -->
+<input
+    class={`argentina-codigo-unico-de-identificacion-laboral-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/ArgentinaCodigoUnicoDeIdentificacionLaboralView/ArgentinaCodigoUnicoDeIdentificacionLaboralView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // ArgentinaCodigoUnicoDeIdentificacionLaboralView component
+    //
+    // A headless display component for showing Argentina's
+    // Código Único de Identificación Laboral (CUIL) in a read-only format.
+    // Format: Displayed as XX-NNNNNNNN-X: a two-digit prefix denoting registration type/sex (historically 20 male, 27 female, though this classification was discontinued in 2012), the eight-digit DNI (national identity document) number, and a Modulus-11 check digit computed over the ten preceding 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:
+    //   <ArgentinaCodigoUnicoDeIdentificacionLaboralView label="Código Único de Identificación Laboral (CUIL)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/C%C3%B3digo_%C3%9Anico_de_Identificaci%C3%B3n_Laboral
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ArgentinaCodigoUnicoDeIdentificacionLaboralView.svelte -->
+<span
+    class={`argentina-codigo-unico-de-identificacion-laboral-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/BarChart/BarChart.svelte

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

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

package/dist/components/BharatAadhaarInput/BharatAadhaarInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // BharatAadhaarInput component
+    //
+    // A headless input for entering India's Aadhaar (आधार).
+    // Format: Twelve digits, the first of which is never 0 or 1. The twelfth digit is a check digit computed with the Verhoeff algorithm, a checksum that detects every single-digit error and every adjacent-digit transposition. Issued by the Unique Identification Authority of India (UIDAI).
+    //
+    // 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:
+    //   <BharatAadhaarInput label="Aadhaar (आधार)" 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/Aadhaar
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- BharatAadhaarInput.svelte -->
+<input
+    class={`bharat-aadhaar-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/BharatAadhaarView/BharatAadhaarView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // BharatAadhaarView component
+    //
+    // A headless display component for showing India's
+    // Aadhaar (आधार) in a read-only format.
+    // Format: Twelve digits, the first of which is never 0 or 1. The twelfth digit is a check digit computed with the Verhoeff algorithm, a checksum that detects every single-digit error and every adjacent-digit transposition. Issued by the Unique Identification Authority of India (UIDAI).
+    //
+    // 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:
+    //   <BharatAadhaarView label="Aadhaar (आधार)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Aadhaar
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- BharatAadhaarView.svelte -->
+<span
+    class={`bharat-aadhaar-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/BrasilCartaoNacionalDeSaudeInput/BrasilCartaoNacionalDeSaudeInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // BrasilCartaoNacionalDeSaudeInput component
+    //
+    // A headless input for entering Brazil's Cartão Nacional de Saúde (CNS).
+    // 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 "". 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:
+    //   <BrasilCartaoNacionalDeSaudeInput label="Cartão Nacional de Saúde (CNS)" 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/CPF_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>
+
+<!-- BrasilCartaoNacionalDeSaudeInput.svelte -->
+<input
+    class={`brasil-cartao-nacional-de-saude-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

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;