@lilydesignsystem/svelte-headless 0.2.0 → 0.3.0

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/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, {}, "">;

package/dist/components/LuxembourgMatriculeInput/LuxembourgMatriculeInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // LuxembourgMatriculeInput component
+    //
+    // A headless input for entering Luxembourg's Numéro d'Identification Nationale (Matricule).
+    // Format: Thirteen digits in the form YYYYMMDDNNNCC: the first eight digits encode date of birth (YYYYMMDD); the next three are a sequence number; the twelfth digit is a Luhn (Modulus-10) check digit computed over the first eleven digits; the thirteenth digit is a second, independent check digit computed with the Verhoeff algorithm over the first twelve 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:
+    //   <LuxembourgMatriculeInput label="Numéro d'Identification Nationale (Matricule)" 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://ccss.public.lu/fr/glossaire/numero-identification-national/matricule-national.html
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- LuxembourgMatriculeInput.svelte -->
+<input
+    class={`luxembourg-matricule-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/LuxembourgMatriculeView/LuxembourgMatriculeView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // LuxembourgMatriculeView component
+    //
+    // A headless display component for showing Luxembourg's
+    // Numéro d'Identification Nationale (Matricule) in a read-only format.
+    // Format: Thirteen digits in the form YYYYMMDDNNNCC: the first eight digits encode date of birth (YYYYMMDD); the next three are a sequence number; the twelfth digit is a Luhn (Modulus-10) check digit computed over the first eleven digits; the thirteenth digit is a second, independent check digit computed with the Verhoeff algorithm over the first twelve 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:
+    //   <LuxembourgMatriculeView label="Numéro d'Identification Nationale (Matricule)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://ccss.public.lu/fr/glossaire/numero-identification-national/matricule-national.html
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- LuxembourgMatriculeView.svelte -->
+<span
+    class={`luxembourg-matricule-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/MagyarorszagTajSzamInput/MagyarorszagTajSzamInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // MagyarorszagTajSzamInput component
+    //
+    // A headless input for entering Hungary's Társadalombiztosítási Azonosító Jel (TAJ).
+    // Format: Nine digits, displayed as SSS SSS SSK. The first eight digits are a simple issued-in-order serial number; the ninth is a check digit computed by multiplying the first eight digits by alternating weights 3 and 7, summing the products, and taking the result Modulus 10 — an algorithm unique to Hungary, distinct from Luhn.
+    //
+    // 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:
+    //   <MagyarorszagTajSzamInput label="Társadalombiztosítási Azonosító Jel (TAJ)" 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://hu.wikipedia.org/wiki/T%C3%A1rsadalombiztos%C3%ADt%C3%A1si_azonos%C3%ADt%C3%B3_jel
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MagyarorszagTajSzamInput.svelte -->
+<input
+    class={`magyarorszag-taj-szam-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/MagyarorszagTajSzamView/MagyarorszagTajSzamView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // MagyarorszagTajSzamView component
+    //
+    // A headless display component for showing Hungary's
+    // Társadalombiztosítási Azonosító Jel (TAJ) in a read-only format.
+    // Format: Nine digits, displayed as SSS SSS SSK. The first eight digits are a simple issued-in-order serial number; the ninth is a check digit computed by multiplying the first eight digits by alternating weights 3 and 7, summing the products, and taking the result Modulus 10 — an algorithm unique to Hungary, distinct from Luhn.
+    //
+    // 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:
+    //   <MagyarorszagTajSzamView label="Társadalombiztosítási Azonosító Jel (TAJ)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://hu.wikipedia.org/wiki/T%C3%A1rsadalombiztos%C3%ADt%C3%A1si_azonos%C3%ADt%C3%B3_jel
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- MagyarorszagTajSzamView.svelte -->
+<span
+    class={`magyarorszag-taj-szam-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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