@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/UnitedKingdomNationalHealthServiceNumberView/UnitedKingdomNationalHealthServiceNumberView.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // UnitedKingdomNationalHealthServiceNumberView component
+    //
+    // A headless display component for showing a United Kingdom National Health
+    // Service (NHS) number in a read-only format. Renders the number as an inline
+    // <span> element with an accessible label. Suitable for patient records,
+    // summaries, confirmation screens, or any context where an NHS number needs
+    // to be displayed but not edited. This is the View counterpart to the Input
+    // component in the Input/View pattern.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The NHS number string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <UnitedKingdomNationalHealthServiceNumberView label="NHS Number" value="123 456 7890" />
+    //
+    // Examples:
+    //   <!-- Display patient NHS number -->
+    //   <UnitedKingdomNationalHealthServiceNumberView label="Patient NHS Number" value={nhsNumber} />
+    //
+    // Keyboard:
+    //   - None -- passive display-only component
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //   - Screen readers announce the label followed by the text content (the number)
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //   - No hardcoded strings in the component
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - No formatting or validation; consumer provides the value pre-formatted
+    //   - Read-only display; pairs with Input component for editing
+    //
+    // References:
+    //   - NHS Number: https://www.nhs.uk/using-the-nhs/about-the-nhs/what-is-an-nhs-number/
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The NHS number to display */
+        value?: string;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UnitedKingdomNationalHealthServiceNumberView.svelte -->
+<span
+    class={`united-kingdom-national-health-service-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    /** Accessible label for screen readers */
+    label: string;
+    /** The NHS number to display */
+    value?: string;
+    /** Additional HTML attributes */
+    [key: string]: unknown;
+};
+declare const UnitedKingdomNationalHealthServiceNumberView: import("svelte").Component<$$ComponentProps, {}, "">;
+type UnitedKingdomNationalHealthServiceNumberView = ReturnType<typeof UnitedKingdomNationalHealthServiceNumberView>;
+export default UnitedKingdomNationalHealthServiceNumberView;

package/dist/components/UnitedKingdomNationalInsuranceNumberInput/UnitedKingdomNationalInsuranceNumberInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // UnitedKingdomNationalInsuranceNumberInput component
+    //
+    // A headless input for entering United Kingdom's National Insurance Number (NINO).
+    // Format: two prefix letters, six digits, and a suffix letter (A, B, C, or D) — e.g. AB123456A; the letters D, F, I, Q, U, V and the prefix-2 letter O are excluded.
+    //
+    // 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:
+    //   <UnitedKingdomNationalInsuranceNumberInput label="National Insurance Number" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_Insurance_number
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UnitedKingdomNationalInsuranceNumberInput.svelte -->
+<input
+    class={`united-kingdom-national-insurance-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/UnitedKingdomNationalInsuranceNumberView/UnitedKingdomNationalInsuranceNumberView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // UnitedKingdomNationalInsuranceNumberView component
+    //
+    // A headless display component for showing United Kingdom's
+    // National Insurance Number (NINO) in a read-only format.
+    // Format: two prefix letters, six digits, and a suffix letter (A, B, C, or D) — e.g. AB123456A; the letters D, F, I, Q, U, V and the prefix-2 letter O are excluded.
+    //
+    // 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:
+    //   <UnitedKingdomNationalInsuranceNumberView label="National Insurance Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_Insurance_number
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UnitedKingdomNationalInsuranceNumberView.svelte -->
+<span
+    class={`united-kingdom-national-insurance-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/UnitedStatesSocialSecurityNumberInput/UnitedStatesSocialSecurityNumberInput.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    // UnitedStatesSocialSecurityNumberInput component
+    //
+    // A headless input for entering a United States Social Security Number (SSN).
+    // The SSN is a 9-digit identifier assigned by the Social Security Administration,
+    // displayed in "XXX-XX-XXXX" format (3-digit area number, 2-digit group number,
+    // 4-digit serial number). The component enforces this pattern, uses a numeric
+    // keyboard hint for mobile, and disables autocomplete to protect sensitive
+    // personally identifiable information.
+    //
+    // 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:
+    //   <UnitedStatesSocialSecurityNumberInput label="Social Security Number" bind:value />
+    //
+    // Examples:
+    //   <!-- Required SSN input -->
+    //   <UnitedStatesSocialSecurityNumberInput label="Social Security Number" required />
+    //
+    //   <!-- Disabled SSN input -->
+    //   <UnitedStatesSocialSecurityNumberInput label="Social Security Number" disabled />
+    //
+    // Keyboard:
+    //   - Standard text input keyboard behavior
+    //   - Users type digits and hyphens in the format XXX-XX-XXXX
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - inputmode="numeric" hints mobile devices to show a numeric keyboard
+    //   - pattern enforces XXX-XX-XXXX format on form validation
+    //   - autocomplete="off" protects sensitive PII
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //   - No hardcoded strings in the component
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Pattern is defined as a constant to avoid Svelte curly brace parsing
+    //   - Uses $bindable() for two-way data binding on value
+    //
+    // References:
+    //   - Social Security Number format: https://www.ssa.gov/employer/randomization.html
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The current value of the input, bindable */
+        value?: string;
+        /** Whether the input is required for form submission */
+        required?: boolean;
+        /** Whether the input is disabled */
+        disabled?: boolean;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+
+    // Pattern for SSN format: XXX-XX-XXXX (3 digits, hyphen, 2 digits, hyphen, 4 digits)
+    // Defined as a constant to avoid Svelte template expression parsing of curly braces
+    const ssnPattern = "[0-9]{3}-[0-9]{2}-[0-9]{4}";
+</script>
+
+<!-- UnitedStatesSocialSecurityNumberInput.svelte -->
+<input
+    class={`united-states-social-security-number-input ${className}`}
+    type="text"
+    aria-label={label}
+    inputmode="numeric"
+    pattern={ssnPattern}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    /** Accessible label for screen readers */
+    label: string;
+    /** The current value of the input, bindable */
+    value?: string;
+    /** Whether the input is required for form submission */
+    required?: boolean;
+    /** Whether the input is disabled */
+    disabled?: boolean;
+    /** Additional HTML attributes */
+    [key: string]: unknown;
+};
+declare const UnitedStatesSocialSecurityNumberInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type UnitedStatesSocialSecurityNumberInput = ReturnType<typeof UnitedStatesSocialSecurityNumberInput>;
+export default UnitedStatesSocialSecurityNumberInput;

package/dist/components/UnitedStatesSocialSecurityNumberView/UnitedStatesSocialSecurityNumberView.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // UnitedStatesSocialSecurityNumberView component
+    //
+    // A headless display component for showing a United States Social Security
+    // Number (SSN) in a read-only format. Renders the SSN as an inline <span>
+    // element with an accessible label. Suitable for personal records,
+    // confirmation screens, account summaries, or any context where an SSN needs
+    // to be displayed but not edited. This is the View counterpart to the Input
+    // component in the Input/View pattern.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The SSN string to display (e.g., "123-45-6789").
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <UnitedStatesSocialSecurityNumberView label="SSN" value="123-45-6789" />
+    //
+    // Examples:
+    //   <!-- Display SSN with descriptive label -->
+    //   <UnitedStatesSocialSecurityNumberView label="Social Security Number" value={ssn} />
+    //
+    // Keyboard:
+    //   - None -- passive display-only component
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //   - Screen readers announce the label followed by the text content (the number)
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //   - No hardcoded strings in the component
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - No formatting, masking, or validation; consumer provides pre-formatted value
+    //   - Read-only display; pairs with Input component for editing
+    //
+    // References:
+    //   - Social Security Number: https://www.ssa.gov/history/ssn/geocard.html
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The SSN to display */
+        value?: string;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UnitedStatesSocialSecurityNumberView.svelte -->
+<span
+    class={`united-states-social-security-number-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    /** Accessible label for screen readers */
+    label: string;
+    /** The SSN to display */
+    value?: string;
+    /** Additional HTML attributes */
+    [key: string]: unknown;
+};
+declare const UnitedStatesSocialSecurityNumberView: import("svelte").Component<$$ComponentProps, {}, "">;
+type UnitedStatesSocialSecurityNumberView = ReturnType<typeof UnitedStatesSocialSecurityNumberView>;
+export default UnitedStatesSocialSecurityNumberView;

package/dist/components/UrlInput/UrlInput.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+    // UrlInput component
+    //
+    // A headless URL input using the native HTML <input type="url"> element, which
+    // provides built-in URL validation and may trigger URL-specific keyboard layouts
+    // on mobile devices. Commonly used in profile forms, link submission pages, and
+    // any context where users need to enter a valid web address. The browser's
+    // built-in validation ensures the entered value matches URL format.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   value — string, default "". Bindable URL value; supports bind:value.
+    //   required — boolean, default false. Whether the field is required.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <UrlInput label="Website URL" bind:value />
+    //
+    // Examples:
+    //   <!-- Required portfolio URL -->
+    //   <UrlInput label="Portfolio link" bind:value={portfolioUrl} required />
+    //
+    // Keyboard:
+    //   - None beyond native text input behavior
+    //
+    // Accessibility:
+    //   - aria-label={label} provides the accessible name since no visible label is associated
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Uses $bindable() for two-way data binding on value
+    //   - Browser validates URL format including protocol on form submission
+    //
+    // References:
+    //   - MDN input type="url": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Current value. Bindable. */
+        value?: string;
+        /** Whether required. */
+        required?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- UrlInput.svelte -->
+<input
+    class={`url-input ${className}`}
+    type="url"
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/ValidationList/ValidationList.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    // ValidationList component
+    //
+    // A headless `<ul>` that hosts a live-feedback list of validation rules.
+    // Each child is typically a `ValidationListItem`. The list applies a
+    // REQUIRED `aria-label` and `aria-live="polite"` so that status changes
+    // on its descendants are announced unobtrusively by screen readers.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label naming the field/list.
+    //   children — Snippet, required. Validation list items.
+    //   ...restProps — additional HTML attributes spread onto the <ul>.
+    //
+    // Syntax:
+    //   <ValidationList label="Password requirements">…</ValidationList>
+    //
+    // Accessibility:
+    //   - <ul> conveys list semantics
+    //   - aria-label names the list
+    //   - aria-live="polite" announces dynamic changes
+    //
+    // Internationalization:
+    //   - label is consumer-supplied
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - label is REQUIRED
+    //   - aria-live="polite" is the headless contract
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Optional CSS class appended to the base class */
+        class?: string;
+        /** Accessible label naming the list (REQUIRED) */
+        label: string;
+        /** Validation list item children */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ValidationList.svelte -->
+<ul
+    class={`validation-list ${className}`}
+    aria-label={label}
+    aria-live="polite"
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Optional CSS class appended to the base class */
+    class?: string;
+    /** Accessible label naming the list (REQUIRED) */
+    label: string;
+    /** Validation list item children */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ValidationList: import("svelte").Component<$$ComponentProps, {}, "">;
+type ValidationList = ReturnType<typeof ValidationList>;
+export default ValidationList;

package/dist/components/ValidationListItem/ValidationListItem.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    // ValidationListItem component
+    //
+    // A headless `<li>` that represents one validation rule in a
+    // `ValidationList`. The status is exposed via the `data-status` attribute
+    // (`pending`, `passed`, or `failed`) so consumers can style each state.
+    // The textual rule comes from `children`; an optional `aria-label` may
+    // override the accessible name.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   status — "pending" | "passed" | "failed", default "pending".
+    //   label — string, optional. aria-label override.
+    //   children — Snippet, required. Rule text.
+    //   ...restProps — additional HTML attributes spread onto the <li>.
+    //
+    // Syntax:
+    //   <ValidationListItem status="passed">At least 8 characters</ValidationListItem>
+    //
+    // Accessibility:
+    //   - data-status conveys state for consumer styling
+    //   - Rule text is the accessible content; aria-label may override
+    //
+    // Internationalization:
+    //   - Rule text is consumer-supplied
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - children is REQUIRED
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        status = "pending",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Optional CSS class appended to the base class */
+        class?: string;
+        /** Validation status */
+        status?: "pending" | "passed" | "failed";
+        /** Optional aria-label override */
+        label?: string;
+        /** Rule text content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ValidationListItem.svelte -->
+<li
+    class={`validation-list-item ${className}`}
+    data-status={status}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Optional CSS class appended to the base class */
+    class?: string;
+    /** Validation status */
+    status?: "pending" | "passed" | "failed";
+    /** Optional aria-label override */
+    label?: string;
+    /** Rule text content */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ValidationListItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type ValidationListItem = ReturnType<typeof ValidationListItem>;
+export default ValidationListItem;