@lilydesignsystem/svelte-headless 0.6.1 → 0.6.2

package/dist/components/MockupTabletLandscape/MockupTabletLandscape.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- MockupTabletLandscape.svelte -->
-<div class={`mockup-tablet-landscape ${className}`} aria-label={label} {...restProps}>
+<div
+    class={`mockup-tablet-landscape ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/MockupTabletPortrait/MockupTabletPortrait.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- MockupTabletPortrait.svelte -->
-<div class={`mockup-tablet-portrait ${className}`} aria-label={label} {...restProps}>
+<div
+    class={`mockup-tablet-portrait ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/MockupWatch/MockupWatch.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- MockupWatch.svelte -->
-<div class={`mockup-watch ${className}`} aria-label={label} {...restProps}>
+<div
+    class={`mockup-watch ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/MockupWindow/MockupWindow.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- MockupWindow.svelte -->
-<div class={`mockup-window ${className}`} aria-label={label} {...restProps}>
+<div
+    class={`mockup-window ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
 </div>

package/dist/components/MutuallyExclusive/MutuallyExclusive.svelte

@@ -16,7 +16,6 @@
 <!-- MutuallyExclusive.svelte -->
 <fieldset
     class={`mutually-exclusive ${className}`}
-
     aria-label={label}
     {...restProps}
 >

package/dist/components/NavigationMenu/NavigationMenu.svelte

@@ -10,6 +10,10 @@
     // Props:
     //   className — string, optional. CSS class name.
     //   label — string, required. Accessible name via aria-label to distinguish this nav landmark.
+    //   overflow — boolean, optional (default false). Overflow mode: renders the list (<ul class="navigation-menu-list">,
+    //     so your children must be <li> items) and a hidden "More" item; a ResizeObserver moves the items that do not
+    //     fit into a disclosure. Publishes data-overflow="true" on the root. Without JavaScript the links simply wrap.
+    //   moreLabel — string, required when overflow is set. The More button's accessible name (no English from us).
     //   children — Snippet, required. Navigation content (links, lists, nested menus).
     //   ...restProps — additional HTML attributes spread onto the <nav>.
     //
@@ -33,9 +37,16 @@
     //     </ul>
     //   </NavigationMenu>
     //
+    //   <!-- Overflow mode: the items must be <li> -->
+    //   <NavigationMenu label="Main navigation" overflow moreLabel="More">
+    //     <li><a href="/">Home</a></li>
+    //     <li><a href="/about">About</a></li>
+    //   </NavigationMenu>
+    //
     // Keyboard:
-    //   - None — this is a passive container. Navigation links inside use standard
-    //     Tab key focus and Enter/Space activation provided by the browser.
+    //   - None by default — a passive container; links use the browser's Tab and Enter.
+    //   - Overflow mode: Enter / Space toggle the More button; Escape closes the list and returns focus to the button;
+    //     Tab moves through the moved links in order; a click outside closes it. The opened list is in normal flow.
     //
     // Accessibility:
     //   - <nav> element implicitly has role="navigation", making it a navigation landmark
@@ -55,26 +66,63 @@
     //   - WAI-ARIA Landmarks: https://www.w3.org/WAI/ARIA/apd/practices/landmark-regions/
 
     import type { Snippet } from "svelte";
+    import { setupOverflowNavigation } from "./overflow-navigation";
 
     let {
         class: className = "",
         label,
+        overflow = false,
+        moreLabel = "",
         children,
         ...restProps
     }: {
         /** Accessible label. */
         label: string;
+        /** Overflow mode: items that do not fit move into a "More" disclosure. Children must be <li> items. */
+        overflow?: boolean;
+        /** Accessible name of the More button. Required when `overflow` is set. */
+        moreLabel?: string;
         /** Navigation content. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();
+
+    let root: HTMLElement | undefined = $state();
+
+    $effect(() => {
+        if (!overflow || !root) return;
+        const handle = setupOverflowNavigation(root);
+        return () => handle?.dispose();
+    });
 </script>
 
 <!-- NavigationMenu.svelte -->
 <nav
+    bind:this={root}
     class={`navigation-menu ${className}`}
     aria-label={label}
+    data-overflow={overflow ? "true" : undefined}
     {...restProps}
 >
-    {@render children?.()}
+    {#if overflow}
+        <ul class="navigation-menu-list">
+            {@render children?.()}
+            <li
+                class="navigation-menu-more"
+                hidden
+            >
+                <button
+                    class="navigation-menu-more-button"
+                    type="button"
+                    aria-expanded="false">{moreLabel}</button
+                >
+                <ul
+                    class="navigation-menu-more-list"
+                    hidden
+                ></ul>
+            </li>
+        </ul>
+    {:else}
+        {@render children?.()}
+    {/if}
 </nav>

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

@@ -2,6 +2,10 @@ import type { Snippet } from "svelte";
 type $$ComponentProps = {
     /** Accessible label. */
     label: string;
+    /** Overflow mode: items that do not fit move into a "More" disclosure. Children must be <li> items. */
+    overflow?: boolean;
+    /** Accessible name of the More button. Required when `overflow` is set. */
+    moreLabel?: string;
     /** Navigation content. */
     children: Snippet;
     [key: string]: unknown;

package/dist/components/NavigationMenu/overflow-navigation.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Overflow navigation: measure which items of a navigation list fit on one row and move the rest into a "More" disclosure.
+ * Framework-neutral and dependency-free; the component renders the markup, this module only moves nodes and toggles state.
+ *
+ * Expected markup (rendered by every NavigationMenu in `overflow` mode, nothing here creates it):
+ *
+ *   <nav class="navigation-menu" data-overflow="true">
+ *     <ul class="navigation-menu-list">
+ *       <li>…item…</li> …
+ *       <li class="navigation-menu-more" hidden>
+ *         <button class="navigation-menu-more-button" type="button" aria-expanded="false">{moreLabel}</button>
+ *         <ul class="navigation-menu-more-list" hidden></ul>
+ *       </li>
+ *     </ul>
+ *   </nav>
+ *
+ * Progressive enhancement: without this script the More item stays `hidden` and the list wraps (consumer CSS: flex-wrap).
+ * With it, a ResizeObserver on the list (never a window `resize` listener) re-measures; the items that do not fit, in order,
+ * are appended to the More list, and moved back, in order, when room returns. The opened More list stays in normal flow, so it
+ * pushes the content below it down and never covers it (WCAG 2.4.11). Escape closes it and returns focus to the button, and a
+ * click outside closes it. Items keep their links and `aria-current`; the module reads and writes no text.
+ */
+/** How many of `widths` fit in `available` on one row, in the unit the widths use. Pure.
+ *  If all fit, returns widths.length. Otherwise the most that fit beside the More item (`moreWidth`). `gap` separates items. */
+export declare function fitCount(widths: number[], available: number, moreWidth: number, gap?: number): number;
+export interface OverflowNavigation {
+    /** Re-measure now (the observer calls this; call it yourself after the items change). */
+    update(): void;
+    /** Remove every listener and the observer; moved items go back to the list. */
+    dispose(): void;
+}
+/** Attach overflow behaviour to a `.navigation-menu` root. Returns null when the expected markup is missing. */
+export declare function setupOverflowNavigation(root: HTMLElement): OverflowNavigation | null;
+/** The name the Blazor JS-interop module and the HTML snippet call. */
+export declare const attach: typeof setupOverflowNavigation;

package/dist/components/NavigationMenu/overflow-navigation.js

@@ -0,0 +1,133 @@
+/**
+ * Overflow navigation: measure which items of a navigation list fit on one row and move the rest into a "More" disclosure.
+ * Framework-neutral and dependency-free; the component renders the markup, this module only moves nodes and toggles state.
+ *
+ * Expected markup (rendered by every NavigationMenu in `overflow` mode, nothing here creates it):
+ *
+ *   <nav class="navigation-menu" data-overflow="true">
+ *     <ul class="navigation-menu-list">
+ *       <li>…item…</li> …
+ *       <li class="navigation-menu-more" hidden>
+ *         <button class="navigation-menu-more-button" type="button" aria-expanded="false">{moreLabel}</button>
+ *         <ul class="navigation-menu-more-list" hidden></ul>
+ *       </li>
+ *     </ul>
+ *   </nav>
+ *
+ * Progressive enhancement: without this script the More item stays `hidden` and the list wraps (consumer CSS: flex-wrap).
+ * With it, a ResizeObserver on the list (never a window `resize` listener) re-measures; the items that do not fit, in order,
+ * are appended to the More list, and moved back, in order, when room returns. The opened More list stays in normal flow, so it
+ * pushes the content below it down and never covers it (WCAG 2.4.11). Escape closes it and returns focus to the button, and a
+ * click outside closes it. Items keep their links and `aria-current`; the module reads and writes no text.
+ */
+/** How many of `widths` fit in `available` on one row, in the unit the widths use. Pure.
+ *  If all fit, returns widths.length. Otherwise the most that fit beside the More item (`moreWidth`). `gap` separates items. */
+export function fitCount(widths, available, moreWidth, gap = 0) {
+    const total = widths.reduce((sum, w) => sum + w, 0) + gap * Math.max(0, widths.length - 1);
+    if (total <= available)
+        return widths.length;
+    let used = moreWidth;
+    let count = 0;
+    for (const w of widths) {
+        if (used + w + gap > available)
+            break;
+        used += w + gap;
+        count += 1;
+    }
+    return count;
+}
+let counter = 0;
+/** Attach overflow behaviour to a `.navigation-menu` root. Returns null when the expected markup is missing. */
+export function setupOverflowNavigation(root) {
+    const list = root.querySelector(".navigation-menu-list");
+    const more = list?.querySelector(":scope > .navigation-menu-more") ?? null;
+    const button = more?.querySelector(":scope > .navigation-menu-more-button") ?? null;
+    const moreList = more?.querySelector(":scope > .navigation-menu-more-list") ?? null;
+    if (!list || !more || !button || !moreList)
+        return null;
+    const doc = root.ownerDocument;
+    if (!moreList.id)
+        moreList.id = `navigation-menu-more-list-${++counter}`;
+    button.setAttribute("aria-controls", moreList.id);
+    if (!button.hasAttribute("aria-expanded"))
+        button.setAttribute("aria-expanded", "false");
+    let lastAvailable = -1;
+    let lastCount = -1;
+    const setOpen = (open, refocus = false) => {
+        moreList.hidden = !open;
+        button.setAttribute("aria-expanded", String(open));
+        if (!open && refocus)
+            button.focus();
+    };
+    const items = () => [
+        ...Array.from(list.children).filter((c) => c !== more),
+        ...Array.from(moreList.children),
+    ];
+    const update = () => {
+        const available = list.clientWidth;
+        const all = items();
+        if (available === lastAvailable && all.length === lastCount)
+            return;
+        lastAvailable = available;
+        lastCount = all.length;
+        const active = doc.activeElement;
+        // Put everything back in order so each item can be measured where it sits on the row.
+        for (const item of all)
+            list.insertBefore(item, more);
+        more.hidden = true;
+        const gap = parseFloat(root.ownerDocument.defaultView?.getComputedStyle(list).columnGap ?? "") || 0;
+        const widths = all.map((item) => item.offsetWidth);
+        let count = fitCount(widths, available, 0, gap);
+        if (count < all.length) {
+            more.hidden = false;
+            count = fitCount(widths, available, more.offsetWidth, gap);
+        }
+        for (const item of all.slice(count))
+            moreList.appendChild(item);
+        if (count >= all.length) {
+            more.hidden = true;
+            setOpen(false);
+        }
+        if (active instanceof HTMLElement &&
+            active !== doc.body &&
+            doc.contains(active) &&
+            doc.activeElement !== active) {
+            active.focus();
+        }
+    };
+    const onClick = () => setOpen(Boolean(moreList.hidden));
+    const onKeydown = (event) => {
+        if (event.key === "Escape" && !moreList.hidden) {
+            event.stopPropagation();
+            setOpen(false, true);
+        }
+    };
+    const onOutside = (event) => {
+        if (!moreList.hidden && event.target instanceof Node && !more.contains(event.target))
+            setOpen(false);
+    };
+    button.addEventListener("click", onClick);
+    more.addEventListener("keydown", onKeydown);
+    doc.addEventListener("click", onOutside);
+    let observer = null;
+    if (typeof ResizeObserver !== "undefined") {
+        observer = new ResizeObserver(() => update());
+        observer.observe(list);
+    }
+    update();
+    return {
+        update,
+        dispose() {
+            observer?.disconnect();
+            button.removeEventListener("click", onClick);
+            more.removeEventListener("keydown", onKeydown);
+            doc.removeEventListener("click", onOutside);
+            for (const item of Array.from(moreList.children))
+                list.insertBefore(item, more);
+            more.hidden = true;
+            setOpen(false);
+        },
+    };
+}
+/** The name the Blazor JS-interop module and the HTML snippet call. */
+export const attach = setupOverflowNavigation;

package/dist/components/NetPromoterScorePicker/NetPromoterScorePicker.svelte

@@ -86,7 +86,9 @@
             timer = setTimeout(() => {
                 if (event.defaultPrevented || !root) return;
                 value = initialValue;
-                for (const input of root.querySelectorAll<HTMLInputElement>('input[type="radio"]')) {
+                for (const input of root.querySelectorAll<HTMLInputElement>(
+                    'input[type="radio"]',
+                )) {
                     input.checked = input.value === String(initialValue);
                 }
             }, 0);

package/dist/components/NetPromoterScorePickerButton/NetPromoterScorePickerButton.svelte

@@ -77,5 +77,5 @@
     {disabled}
     data-value={value}
     {onclick}
-    {...restProps}
->{label}</button>
+    {...restProps}>{label}</button
+>

package/dist/components/NigeriaNationalIdentificationNumberInput/NigeriaNationalIdentificationNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // NigeriaNationalIdentificationNumberInput component
+    //
+    // A headless input for entering Nigeria's National Identification Number (NIN).
+    // Format: Eleven digits issued by the National Identity Management Commission (NIMC). No check-digit algorithm is published, so only the length and digits can be checked.
+    //
+    // 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:
+    //   <NigeriaNationalIdentificationNumberInput label="National Identification Number (NIN)" 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_Identity_Management_Commission
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- NigeriaNationalIdentificationNumberInput.svelte -->
+<input
+    class={`nigeria-national-identification-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/NigeriaNationalIdentificationNumberView/NigeriaNationalIdentificationNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // NigeriaNationalIdentificationNumberView component
+    //
+    // A headless display component for showing Nigeria's
+    // National Identification Number (NIN) in a read-only format.
+    // Format: Eleven digits issued by the National Identity Management Commission (NIMC). No check-digit algorithm is published, so only the length and digits can be checked.
+    //
+    // 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:
+    //   <NigeriaNationalIdentificationNumberView label="National Identification Number (NIN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_Identity_Management_Commission
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- NigeriaNationalIdentificationNumberView.svelte -->
+<span
+    class={`nigeria-national-identification-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Organization/Organization.svelte

@@ -13,6 +13,10 @@
 </script>
 
 <!-- Organization.svelte -->
-<div class={`organization ${className}`} aria-label={label} {...restProps}>
+<article
+    class={`organization ${className}`}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</article>

package/dist/components/PaginationLink/PaginationLink.svelte

@@ -2,17 +2,27 @@
     import type { Snippet } from "svelte";
     let {
         class: className = "",
+        href,
         label = undefined,
         children,
         ...restProps
     }: {
+        /** The URL to navigate to. */
+        href: string;
+        /** Accessible label override for screen readers. */
         label?: string;
+        /** The link content. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();
 </script>
 
 <!-- PaginationLink.svelte -->
-<div class={`pagination-link ${className}`} aria-label={label} {...restProps}>
+<a
+    class={`pagination-link ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>
     {@render children?.()}
-</div>
+</a>

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

@@ -1,6 +1,10 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
+    /** The URL to navigate to. */
+    href: string;
+    /** Accessible label override for screen readers. */
     label?: string;
+    /** The link content. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/PakistanComputerizedNationalIdentityCardInput/PakistanComputerizedNationalIdentityCardInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PakistanComputerizedNationalIdentityCardInput component
+    //
+    // A headless input for entering Pakistan's Computerized National Identity Card Number (CNIC).
+    // Format: Thirteen digits, written 12345-1234567-1: a five-digit locality code (province, division, district and tehsil), a seven-digit family number, and a final digit that is odd for a male and even for a female. There is no 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:
+    //   <PakistanComputerizedNationalIdentityCardInput label="Computerized National Identity Card Number (CNIC)" 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/Computerized_National_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>
+
+<!-- PakistanComputerizedNationalIdentityCardInput.svelte -->
+<input
+    class={`pakistan-computerized-national-identity-card-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PakistanComputerizedNationalIdentityCardView/PakistanComputerizedNationalIdentityCardView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PakistanComputerizedNationalIdentityCardView component
+    //
+    // A headless display component for showing Pakistan's
+    // Computerized National Identity Card Number (CNIC) in a read-only format.
+    // Format: Thirteen digits, written 12345-1234567-1: a five-digit locality code (province, division, district and tehsil), a seven-digit family number, and a final digit that is odd for a male and even for a female. There is no 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:
+    //   <PakistanComputerizedNationalIdentityCardView label="Computerized National Identity Card Number (CNIC)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Computerized_National_Identity_Card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PakistanComputerizedNationalIdentityCardView.svelte -->
+<span
+    class={`pakistan-computerized-national-identity-card-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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