@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/NetPromoterScoreView/NetPromoterScoreView.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    // NetPromoterScoreView component
+    //
+    // A headless Net Promoter Score (NPS) rating view that displays an NPS score
+    // value as read-only text within a <span> element. Used to show previously
+    // captured NPS data in dashboards, reports, or detail views. NPS scores range
+    // from 0 to 10, with respondents classified as Detractors (0-6), Passives (7-8),
+    // or Promoters (9-10).
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The NPS score value to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <NetPromoterScoreView label="NPS Score" value="8" />
+    //
+    // Examples:
+    //   <!-- Display a static NPS score -->
+    //   <NetPromoterScoreView label="NPS Score" value="8" />
+    //
+    //   <!-- Display a dynamic score with reactive binding -->
+    //   <NetPromoterScoreView label="Customer rating" value={score} />
+    //
+    // Keyboard:
+    //   - None — this is a passive informational display, not interactive.
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce context
+    //   - Screen readers announce both the label and the displayed value
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - The value is displayed as-is, allowing localized formatting
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No score validation or classification logic; consumer handles categorization
+    //   - Part of the Input/View pattern; pairs with NetPromoterScorePicker
+    //
+    // References:
+    //   - Net Promoter Score: https://en.wikipedia.org/wiki/Net_promoter_score
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The NPS score value to display */
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- NetPromoterScoreView: displays an NPS score as text -->
+<span
+    class={`net-promoter-score-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/NewsletterSignup/NewsletterSignup.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+    // NewsletterSignup component
+    //
+    // An email subscription form composition with idle, submitting, success,
+    // and error states. Renders a native <form> with an email input, submit
+    // button, and conditionally-hidden status/alert paragraphs for success
+    // and error messages.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label for the form.
+    //   heading — string, optional. Visible heading text.
+    //   description — string, optional. Body text below the heading.
+    //   emailLabel — string, REQUIRED. Visible label for the email input.
+    //   emailPlaceholder — string, optional. Email input placeholder.
+    //   submitLabel — string, REQUIRED. Submit button text.
+    //   state — "idle" | "submitting" | "success" | "error", default "idle".
+    //   successMessage — string, optional. Message shown when state is "success".
+    //   errorMessage — string, optional. Message shown when state is "error".
+    //   onsubmit — (event: SubmitEvent) => void, optional. Submit handler.
+    //   ...restProps — additional HTML attributes spread onto the <form>.
+    //
+    // Syntax:
+    //   <NewsletterSignup
+    //     label="Subscribe to newsletter"
+    //     emailLabel="Email"
+    //     submitLabel="Subscribe"
+    //     state={state}
+    //     successMessage="Thanks!"
+    //     errorMessage="Something went wrong."
+    //     onsubmit={handleSubmit}
+    //   />
+    //
+    // Accessibility:
+    //   - Form has aria-label
+    //   - Success message uses role="status" + aria-live="polite"
+    //   - Error message uses role="alert"
+    //   - Both status messages are conditionally hidden based on state
+    //
+    // Internationalization:
+    //   - All text content via props
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - label, emailLabel, submitLabel are REQUIRED — TypeScript reflects this
+
+    let {
+        class: className = "",
+        label,
+        heading = undefined,
+        description = undefined,
+        emailLabel,
+        emailPlaceholder = undefined,
+        submitLabel,
+        state = "idle",
+        successMessage = undefined,
+        errorMessage = undefined,
+        onsubmit = undefined,
+        ...restProps
+    }: {
+        /** Consumer CSS class appended to base class */
+        class?: string;
+        /** aria-label for the form (REQUIRED) */
+        label: string;
+        /** Visible heading text */
+        heading?: string;
+        /** Body text below the heading */
+        description?: string;
+        /** Visible label for the email input (REQUIRED) */
+        emailLabel: string;
+        /** Email input placeholder */
+        emailPlaceholder?: string;
+        /** Submit button text (REQUIRED) */
+        submitLabel: string;
+        /** Form state */
+        state?: "idle" | "submitting" | "success" | "error";
+        /** Success message text */
+        successMessage?: string;
+        /** Error message text */
+        errorMessage?: string;
+        /** Submit handler */
+        onsubmit?: (event: SubmitEvent) => void;
+        [key: string]: unknown;
+    } = $props();
+
+    let isSubmitting = $derived(state === "submitting");
+    let isSuccess = $derived(state === "success");
+    let isError = $derived(state === "error");
+</script>
+
+<!-- NewsletterSignup.svelte -->
+<form
+    class={`newsletter-signup ${className}`}
+    aria-label={label}
+    data-state={state}
+    {onsubmit}
+    {...restProps}
+>
+    {#if heading || description}
+        <header class="newsletter-signup-header">
+            {#if heading}
+                <h3 class="newsletter-signup-heading">{heading}</h3>
+            {/if}
+            {#if description}
+                <p class="newsletter-signup-description">{description}</p>
+            {/if}
+        </header>
+    {/if}
+    <label class="newsletter-signup-label">
+        {emailLabel}
+        <input
+            class="newsletter-signup-input"
+            type="email"
+            disabled={isSubmitting}
+            placeholder={emailPlaceholder}
+        />
+    </label>
+    <button
+        class="newsletter-signup-submit"
+        type="submit"
+        disabled={isSubmitting}
+    >
+        {submitLabel}
+    </button>
+    <p
+        class="newsletter-signup-success"
+        role="status"
+        aria-live="polite"
+        hidden={!isSuccess}
+    >
+        {successMessage ?? ""}
+    </p>
+    <p
+        class="newsletter-signup-error"
+        role="alert"
+        hidden={!isError}
+    >
+        {errorMessage ?? ""}
+    </p>
+</form>

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

@@ -0,0 +1,28 @@
+type $$ComponentProps = {
+    /** Consumer CSS class appended to base class */
+    class?: string;
+    /** aria-label for the form (REQUIRED) */
+    label: string;
+    /** Visible heading text */
+    heading?: string;
+    /** Body text below the heading */
+    description?: string;
+    /** Visible label for the email input (REQUIRED) */
+    emailLabel: string;
+    /** Email input placeholder */
+    emailPlaceholder?: string;
+    /** Submit button text (REQUIRED) */
+    submitLabel: string;
+    /** Form state */
+    state?: "idle" | "submitting" | "success" | "error";
+    /** Success message text */
+    successMessage?: string;
+    /** Error message text */
+    errorMessage?: string;
+    /** Submit handler */
+    onsubmit?: (event: SubmitEvent) => void;
+    [key: string]: unknown;
+};
+declare const NewsletterSignup: import("svelte").Component<$$ComponentProps, {}, "">;
+type NewsletterSignup = ReturnType<typeof NewsletterSignup>;
+export default NewsletterSignup;

package/dist/components/NorgeFodselsnummerInput/NorgeFodselsnummerInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // NorgeFodselsnummerInput component
+    //
+    // A headless input for entering Norway's Fødselsnummer.
+    // Format: 11 digits where the first 6 represent the date of birth (DDMMYY).
+    //
+    // 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:
+    //   <NorgeFodselsnummerInput label="Norwegian Birth 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_identification_number#Norway
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- NorgeFodselsnummerInput.svelte -->
+<input
+    class={`norge-fodselsnummer-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/NorgeFodselsnummerView/NorgeFodselsnummerView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // NorgeFodselsnummerView component
+    //
+    // A headless display component for showing Norway's
+    // Fødselsnummer in a read-only format.
+    // Format: 11 digits where the first 6 represent the date of birth (DDMMYY).
+    //
+    // 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:
+    //   <NorgeFodselsnummerView label="Norwegian Birth Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_number#Norway
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- NorgeFodselsnummerView.svelte -->
+<span
+    class={`norge-fodselsnummer-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Notification/Notification.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    // Notification component
+    //
+    // A headless notification/toast message that delivers timely messages to users
+    // about events, updates, or actions. It renders a <div> with ARIA live region
+    // semantics, using role="status" with aria-live="polite" by default, or
+    // role="alert" with aria-live="assertive" when urgent. Commonly used for
+    // success confirmations, error alerts, and informational updates.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, optional. Accessible name for the notification region via aria-label.
+    //   urgent — boolean, default false. When true, uses role="alert" and aria-live="assertive".
+    //   children — Snippet, required. The notification message content.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Notification label="Success">Message here.</Notification>
+    //
+    // Examples:
+    //   <!-- Non-urgent notification with polite announcement -->
+    //   <Notification label="Success">Your changes have been saved.</Notification>
+    //
+    //   <!-- Urgent notification that interrupts immediately -->
+    //   <Notification label="Error" urgent>Something went wrong. Please try again.</Notification>
+    //
+    //   <!-- Notification without explicit label -->
+    //   <Notification>3 new messages</Notification>
+    //
+    // Keyboard:
+    //   None — this is a passive announcement container; screen readers announce
+    //   content automatically via ARIA live regions without user interaction.
+    //
+    // Accessibility:
+    //   - role="status" (default) for polite, non-urgent announcements
+    //   - role="alert" (when urgent) for assertive, immediate announcements
+    //   - aria-label provides an accessible name for the notification region
+    //   - aria-live="polite" (default) waits for user idle before announcing
+    //   - aria-live="assertive" (when urgent) interrupts the user immediately
+    //
+    // Internationalization:
+    //   - All text content comes through the children snippet and label prop
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - The urgent prop switches both the role and aria-live simultaneously
+    //   - Do not add close/dismiss logic — consumer manages notification lifecycle
+    //
+    // References:
+    //   - WAI-ARIA alert role: https://www.w3.org/TR/wai-aria-1.2/#alert
+    //   - WAI-ARIA status role: https://www.w3.org/TR/wai-aria-1.2/#status
+    //   - WAI-ARIA Live Regions: https://www.w3.org/WAI/ARIA/apd/practices/live-regions/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        urgent = false,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        urgent?: boolean;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Notification.svelte -->
+<div
+    class={`notification ${className}`}
+    role={urgent ? "alert" : "status"}
+    aria-label={label}
+    aria-live={urgent ? "assertive" : "polite"}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/NumberInput/NumberInput.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+    // NumberInput component
+    //
+    // A headless numeric input that wraps a native <input type="number"> element
+    // with accessible labelling and optional min, max, and step constraints. It
+    // provides a bindable numeric value for two-way data flow. Commonly used for
+    // quantity selectors, age inputs, price fields, and configuration values.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the input via aria-label.
+    //   value — number | undefined, default undefined. Current numeric value; bindable.
+    //   min — number, optional. Minimum allowed value.
+    //   max — number, optional. Maximum allowed value.
+    //   step — number, optional. Increment/decrement step size.
+    //   required — boolean, default false. Whether the input is required.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <NumberInput label="Quantity" bind:value />
+    //
+    // Examples:
+    //   <!-- Number input with constraints -->
+    //   <NumberInput label="Quantity" bind:value min={0} max={100} step={1} />
+    //
+    //   <!-- Required number input -->
+    //   <NumberInput label="Age" bind:value required />
+    //
+    // Keyboard:
+    //   - Up Arrow: increment value by step (native browser behavior)
+    //   - Down Arrow: decrement value by step (native browser behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name describing the input purpose
+    //   - Implicit spinbutton role from <input type="number">
+    //   - Native validation via min, max, and step attributes
+    //
+    // Internationalization:
+    //   - The label prop is the only user-facing text; no hardcoded strings
+    //   - Consumer can pass placeholder via restProps for localized hint text
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Uses $bindable(undefined) for value, not $bindable(0)
+    //   - Do not wrap in a <div> — renders a bare <input> element
+    //
+    // References:
+    //   - HTML number input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number
+    //   - WAI-ARIA spinbutton role: https://www.w3.org/TR/wai-aria-1.2/#spinbutton
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(undefined),
+        min = undefined,
+        max = undefined,
+        step = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: number | undefined;
+        min?: number;
+        max?: number;
+        step?: number;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- NumberInput.svelte -->
+<input
+    class={`number-input ${className}`}
+    type="number"
+    aria-label={label}
+    bind:value
+    {min}
+    {max}
+    {step}
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/Option/Option.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    // Option component
+    //
+    // A headless <option> element wrapper for use inside <select> elements. It
+    // accepts a value prop for the form submission value and renders children as
+    // the visible option label text. Supports selected and disabled states using
+    // native HTML attributes. Used in dropdown menus, form selects, and list pickers.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value — string, required. The option value submitted with the form.
+    //   selected — boolean, default false. Whether this option is pre-selected.
+    //   disabled — boolean, default false. Whether this option is disabled.
+    //   children — Snippet, required. The option label text content.
+    //   ...restProps — additional HTML attributes spread onto the <option>.
+    //
+    // Syntax:
+    //   <Option value="us">United States</Option>
+    //
+    // Examples:
+    //   <!-- Options inside a select -->
+    //   <select>
+    //     <Option value="us">United States</Option>
+    //     <Option value="uk">United Kingdom</Option>
+    //     <Option value="ca" disabled>Canada</Option>
+    //   </select>
+    //
+    // Keyboard:
+    //   None directly — keyboard behavior is managed by the parent <select> element
+    //   (Up/Down arrows, Home/End, type-ahead search).
+    //
+    // Accessibility:
+    //   - Native <option> element provides built-in accessibility via the parent <select>
+    //   - Screen readers announce the option text and selected state automatically
+    //
+    // Internationalization:
+    //   - Option label text comes through the children snippet
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a <select> element for proper semantics
+    //   - Do not add ARIA attributes — native <option> provides all accessibility
+    //
+    // References:
+    //   - HTML option element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        value,
+        selected = false,
+        disabled = false,
+        children,
+        ...restProps
+    }: {
+        /** The value of this option */
+        value: string;
+        /** Whether this option is pre-selected */
+        selected?: boolean;
+        /** Whether this option is disabled */
+        disabled?: boolean;
+        /** The option label content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Option.svelte -->
+<option
+    class={`option ${className}`}
+    {value}
+    {selected}
+    {disabled}
+    {...restProps}>{@render children?.()}</option
+>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The value of this option */
+    value: string;
+    /** Whether this option is pre-selected */
+    selected?: boolean;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** The option label content */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Option: import("svelte").Component<$$ComponentProps, {}, "">;
+type Option = ReturnType<typeof Option>;
+export default Option;

package/dist/components/Organization/Organization.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Organization.svelte -->
+<div class={`organization ${className}`} aria-label={label} {...restProps}>
+    {@render children?.()}
+</div>