@lilydesignsystem/svelte-headless 0.2.0 → 0.4.0

package/dist/components/OneTimePasswordInput/OneTimePasswordInput.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    // OneTimePasswordInput component
+    //
+    // A headless one-time-password (OTP / verification code) field. It is ONE real
+    // native <input>, not a row of segmented boxes (see PinInputDiv for that), so
+    // SMS / password-manager autofill (autocomplete="one-time-code") and paste work.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   length — number, required. Number of characters in the code (maxlength). No default.
+    //   value — string, default "". Bindable.
+    //   inputMode — string, default "numeric". Use "text" for alphanumeric codes.
+    //   pattern — string, default "[0-9]*". Use e.g. "[A-Za-z0-9]*" for alphanumeric codes.
+    //   name — string, optional. Form field name.
+    //   required, disabled — boolean, default false.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <OneTimePasswordInput label="Verification code" length={6} bind:value />
+    //
+    // Keyboard:
+    //   - None beyond native input behavior
+    //
+    // Accessibility:
+    //   - aria-label={label} provides the accessible name
+    //   - autocomplete="one-time-code" lets the platform offer the received code
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles
+    //   - Never validates or submits; the consumer owns verification
+
+    let {
+        class: className = "",
+        label,
+        length,
+        value = $bindable(""),
+        inputMode = "numeric",
+        pattern = "[0-9]*",
+        name = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Number of characters in the code. */
+        length: number;
+        /** Current value. Bindable. */
+        value?: string;
+        /** Virtual keyboard hint. */
+        inputMode?: string;
+        /** Allowed characters pattern. */
+        pattern?: string;
+        /** Form field name. */
+        name?: string;
+        /** Whether required. */
+        required?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- OneTimePasswordInput.svelte -->
+<input
+    class={`one-time-password-input ${className}`}
+    type="text"
+    inputmode={inputMode as any}
+    autocomplete="one-time-code"
+    maxlength={length}
+    {pattern}
+    spellcheck={false}
+    autocapitalize="off"
+    aria-label={label}
+    data-length={length}
+    {name}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,22 @@
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Number of characters in the code. */
+    length: number;
+    /** Current value. Bindable. */
+    value?: string;
+    /** Virtual keyboard hint. */
+    inputMode?: string;
+    /** Allowed characters pattern. */
+    pattern?: string;
+    /** Form field name. */
+    name?: string;
+    /** Whether required. */
+    required?: boolean;
+    /** Whether disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const OneTimePasswordInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type OneTimePasswordInput = ReturnType<typeof OneTimePasswordInput>;
+export default OneTimePasswordInput;

package/dist/components/OsterreichSozialversicherungsnummerInput/OsterreichSozialversicherungsnummerInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // OsterreichSozialversicherungsnummerInput component
+    //
+    // A headless input for entering Austria's Sozialversicherungsnummer (SVNR).
+    // Format: Ten digits, displayed as NNNN DDMMYY. The first three digits are a serial number (the first not zero) followed by a Modulus-11 check digit as the fourth digit; the remaining six digits encode date of birth (DDMMYY). If the Modulus-11 remainder is 10, the serial number is incremented by one and the check digit recalculated.
+    //
+    // 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:
+    //   <OsterreichSozialversicherungsnummerInput label="Sozialversicherungsnummer (SVNR)" 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://de.wikipedia.org/wiki/Sozialversicherungsnummer
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- OsterreichSozialversicherungsnummerInput.svelte -->
+<input
+    class={`osterreich-sozialversicherungsnummer-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/OsterreichSozialversicherungsnummerView/OsterreichSozialversicherungsnummerView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // OsterreichSozialversicherungsnummerView component
+    //
+    // A headless display component for showing Austria's
+    // Sozialversicherungsnummer (SVNR) in a read-only format.
+    // Format: Ten digits, displayed as NNNN DDMMYY. The first three digits are a serial number (the first not zero) followed by a Modulus-11 check digit as the fourth digit; the remaining six digits encode date of birth (DDMMYY). If the Modulus-11 remainder is 10, the serial number is incremented by one and the check digit recalculated.
+    //
+    // 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:
+    //   <OsterreichSozialversicherungsnummerView label="Sozialversicherungsnummer (SVNR)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://de.wikipedia.org/wiki/Sozialversicherungsnummer
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- OsterreichSozialversicherungsnummerView.svelte -->
+<span
+    class={`osterreich-sozialversicherungsnummer-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/PieChart/PieChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // PieChart component
+    //
+    // A headless chart container for a circular chart divided into slices that show each part of a whole. 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="pie-chart">
+    //     <div class="pie-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="pie-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>
+
+<!-- PieChart.svelte -->
+<figure
+    class={`pie-chart ${className}`}
+    {...restProps}
+>
+    <div class="pie-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="pie-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

package/dist/components/PilipinasPhilhealthIdentificationNumberInput/PilipinasPhilhealthIdentificationNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PilipinasPhilhealthIdentificationNumberInput component
+    //
+    // A headless input for entering the Philippines's PhilHealth Identification Number (PIN).
+    // Format: Twelve-digit number assigned by the Philippine Health Insurance Corporation (PhilHealth) to every enrolled member, commonly displayed grouped as NN-NNNNNNNNN-N. No published check-digit algorithm; correctness is confirmed against PhilHealth's own membership records.
+    //
+    // 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:
+    //   <PilipinasPhilhealthIdentificationNumberInput label="PhilHealth Identification Number (PIN)" 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/PhilHealth
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PilipinasPhilhealthIdentificationNumberInput.svelte -->
+<input
+    class={`pilipinas-philhealth-identification-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PilipinasPhilhealthIdentificationNumberView/PilipinasPhilhealthIdentificationNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PilipinasPhilhealthIdentificationNumberView component
+    //
+    // A headless display component for showing the Philippines's
+    // PhilHealth Identification Number (PIN) in a read-only format.
+    // Format: Twelve-digit number assigned by the Philippine Health Insurance Corporation (PhilHealth) to every enrolled member, commonly displayed grouped as NN-NNNNNNNNN-N. No published check-digit algorithm; correctness is confirmed against PhilHealth's own membership records.
+    //
+    // 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:
+    //   <PilipinasPhilhealthIdentificationNumberView label="PhilHealth Identification Number (PIN)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/PhilHealth
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PilipinasPhilhealthIdentificationNumberView.svelte -->
+<span
+    class={`pilipinas-philhealth-identification-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/PrathetThaiLekPrajamTuaPrachachonInput/PrathetThaiLekPrajamTuaPrachachonInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // PrathetThaiLekPrajamTuaPrachachonInput component
+    //
+    // A headless input for entering Thailand's เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon).
+    // Format: Thirteen digits. Digit 1 denotes registration category; digits 2-5 denote the district/province office of registration; digits 6-10 form a serial number; digit 11 is a Modulus-11 check digit computed over the first ten digits; digits 12-13 are further disambiguating 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:
+    //   <PrathetThaiLekPrajamTuaPrachachonInput label="เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon)" 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/Thai_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>
+
+<!-- PrathetThaiLekPrajamTuaPrachachonInput.svelte -->
+<input
+    class={`prathet-thai-lek-prajam-tua-prachachon-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/PrathetThaiLekPrajamTuaPrachachonView/PrathetThaiLekPrajamTuaPrachachonView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // PrathetThaiLekPrajamTuaPrachachonView component
+    //
+    // A headless display component for showing Thailand's
+    // เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon) in a read-only format.
+    // Format: Thirteen digits. Digit 1 denotes registration category; digits 2-5 denote the district/province office of registration; digits 6-10 form a serial number; digit 11 is a Modulus-11 check digit computed over the first ten digits; digits 12-13 are further disambiguating 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:
+    //   <PrathetThaiLekPrajamTuaPrachachonView label="เลขประจำตัวประชาชน (Lek Prajam Tua Prachachon)" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Thai_identity_card
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- PrathetThaiLekPrajamTuaPrachachonView.svelte -->
+<span
+    class={`prathet-thai-lek-prajam-tua-prachachon-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/RadarChart/RadarChart.svelte

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

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