@lilydesignsystem/svelte-headless 0.2.0 → 0.4.0

package/dist/components/RingChart/RingChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // RingChart component
+    //
+    // A headless chart container for a pie chart with a hollow centre, often used to show progress or a share of a total. 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="ring-chart">
+    //     <div class="ring-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="ring-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>
+
+<!-- RingChart.svelte -->
+<figure
+    class={`ring-chart ${className}`}
+    {...restProps}
+>
+    <div class="ring-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="ring-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

package/dist/components/RossiyaSnilsInput/RossiyaSnilsInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // RossiyaSnilsInput component
+    //
+    // A headless input for entering Russia's СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta).
+    // Format: Eleven digits, displayed as NNN-NNN-NNN CC. The first nine digits are an account number; the last two form a Modulus-101 check value computed as a weighted sum of the first nine digits (each multiplied by its position from 9 down to 1), with sums of 100 or 101 both mapping to a check value of 00.
+    //
+    // 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:
+    //   <RossiyaSnilsInput label="СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta)" 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/SNILS_(Russia)
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RossiyaSnilsInput.svelte -->
+<input
+    class={`rossiya-snils-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/RossiyaSnilsView/RossiyaSnilsView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // RossiyaSnilsView component
+    //
+    // A headless display component for showing Russia's
+    // СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta) in a read-only format.
+    // Format: Eleven digits, displayed as NNN-NNN-NNN CC. The first nine digits are an account number; the last two form a Modulus-101 check value computed as a weighted sum of the first nine digits (each multiplied by its position from 9 down to 1), with sums of 100 or 101 both mapping to a check value of 00.
+    //
+    // 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:
+    //   <RossiyaSnilsView label="СНИЛС (Strakhovoy Nomer Individualnogo Litsevogo Scheta)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/SNILS_(Russia)
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RossiyaSnilsView.svelte -->
+<span
+    class={`rossiya-snils-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/SankeyChart/SankeyChart.svelte

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

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

package/dist/components/ScatterChart/ScatterChart.svelte

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

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

package/dist/components/SchweizAhvNummerInput/SchweizAhvNummerInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // SchweizAhvNummerInput component
+    //
+    // A headless input for entering Switzerland's AHV-Nummer / Numéro AVS.
+    // Format: Thirteen digits, displayed as 756.NNNN.NNNN.NN, always beginning with the country prefix 756. It is a valid EAN-13 barcode number: the final digit is an EAN-13 check digit computed over the twelve preceding digits (alternating-position weights of 1 and 3). Replaced the old 11-digit AHV card number on 1 July 2008.
+    //
+    // 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:
+    //   <SchweizAhvNummerInput label="AHV-Nummer / Numéro AVS" 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/Data_codes_for_Switzerland
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SchweizAhvNummerInput.svelte -->
+<input
+    class={`schweiz-ahv-nummer-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/SchweizAhvNummerView/SchweizAhvNummerView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // SchweizAhvNummerView component
+    //
+    // A headless display component for showing Switzerland's
+    // AHV-Nummer / Numéro AVS in a read-only format.
+    // Format: Thirteen digits, displayed as 756.NNNN.NNNN.NN, always beginning with the country prefix 756. It is a valid EAN-13 barcode number: the final digit is an EAN-13 check digit computed over the twelve preceding digits (alternating-position weights of 1 and 3). Replaced the old 11-digit AHV card number on 1 July 2008.
+    //
+    // 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:
+    //   <SchweizAhvNummerView label="AHV-Nummer / Numéro AVS" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Data_codes_for_Switzerland
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SchweizAhvNummerView.svelte -->
+<span
+    class={`schweiz-ahv-nummer-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/ShowMore/ShowMore.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+    // ShowMore component
+    //
+    // A headless "show more / show less" toggle for long content. The content
+    // stays in the accessibility tree at all times; collapsing is a visual clamp
+    // the consumer applies in CSS keyed on data-expanded. (Use Expander when the
+    // content should be removed from the DOM while collapsed.)
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   moreLabel — string, required. Button text while collapsed. No default.
+    //   lessLabel — string, required. Button text while expanded. No default.
+    //   expanded — boolean, default false. Bindable.
+    //   children — Snippet. The content.
+    //   ...restProps — additional HTML attributes spread onto the root <div>.
+    //
+    // Keyboard:
+    //   - Enter / Space on the native button toggles
+    //
+    // Accessibility:
+    //   - button aria-expanded + aria-controls pointing at the content id
+    //
+    // Claude rules:
+    //   - Headless: no inline style; the clamp is consumer CSS on [data-expanded="false"]
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        moreLabel,
+        lessLabel,
+        expanded = $bindable(false),
+        children,
+        ...restProps
+    }: {
+        /** Button text while collapsed. */
+        moreLabel: string;
+        /** Button text while expanded. */
+        lessLabel: string;
+        /** Whether the content is expanded. Bindable. */
+        expanded?: boolean;
+        /** The content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    const contentId = `show-more-${uid}`;
+</script>
+
+<!-- ShowMore.svelte -->
+<div class={`show-more ${className}`} {...restProps}>
+    <div class="show-more-content" id={contentId} data-expanded={expanded}>
+        {@render children?.()}
+    </div>
+    <button
+        type="button"
+        class="show-more-button"
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        onclick={() => (expanded = !expanded)}
+    >
+        {expanded ? lessLabel : moreLabel}
+    </button>
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Button text while collapsed. */
+    moreLabel: string;
+    /** Button text while expanded. */
+    lessLabel: string;
+    /** Whether the content is expanded. Bindable. */
+    expanded?: boolean;
+    /** The content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ShowMore: import("svelte").Component<$$ComponentProps, {}, "expanded">;
+type ShowMore = ReturnType<typeof ShowMore>;
+export default ShowMore;

package/dist/components/SingaporeNationalRegistrationIdentityCardInput/SingaporeNationalRegistrationIdentityCardInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // SingaporeNationalRegistrationIdentityCardInput component
+    //
+    // A headless input for entering Singapore's National Registration Identity Card Number / Foreign Identification Number (NRIC/FIN).
+    // Format: One letter (S or T for citizens/permanent residents; F or G for long-term foreign residents; M for newer FIN series), seven digits, and a trailing check letter. The check letter is computed by multiplying the seven digits by fixed weights (2,7,6,5,4,3,2), summing the products (adding 4 for a G/T prefix or 3 for an M prefix), taking the sum Modulus 11, and mapping (10 - remainder) through a lookup table to a letter.
+    //
+    // 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:
+    //   <SingaporeNationalRegistrationIdentityCardInput label="National Registration Identity Card Number / Foreign Identification Number (NRIC/FIN)" 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_Registration_Identity_Card
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SingaporeNationalRegistrationIdentityCardInput.svelte -->
+<input
+    class={`singapore-national-registration-identity-card-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/SingaporeNationalRegistrationIdentityCardView/SingaporeNationalRegistrationIdentityCardView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // SingaporeNationalRegistrationIdentityCardView component
+    //
+    // A headless display component for showing Singapore's
+    // National Registration Identity Card Number / Foreign Identification Number (NRIC/FIN) in a read-only format.
+    // Format: One letter (S or T for citizens/permanent residents; F or G for long-term foreign residents; M for newer FIN series), seven digits, and a trailing check letter. The check letter is computed by multiplying the seven digits by fixed weights (2,7,6,5,4,3,2), summing the products (adding 4 for a G/T prefix or 3 for an M prefix), taking the sum Modulus 11, and mapping (10 - remainder) through a lookup table to a letter.
+    //
+    // 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:
+    //   <SingaporeNationalRegistrationIdentityCardView label="National Registration Identity Card Number / Foreign Identification Number (NRIC/FIN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_Registration_Identity_Card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SingaporeNationalRegistrationIdentityCardView.svelte -->
+<span
+    class={`singapore-national-registration-identity-card-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>