@lilydesignsystem/svelte-headless 0.1.0

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether the drawer is visible. Bindable. */
+    open?: boolean;
+    /** Accessible name for the drawer. */
+    label: string;
+    /** Edge the drawer enters from. */
+    side?: "left" | "right" | "top" | "bottom";
+    /** Drawer content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

package/dist/components/DropdownMenu/DropdownMenu.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+    // DropdownMenu component
+    //
+    // A dropdown menu triggered by a button that reveals a list of actions or
+    // options. Combines a toggle button with a conditionally rendered menu panel.
+    // When the menu opens, focus moves automatically to the first menu item.
+    // Common use cases include action menus, settings menus, and context-sensitive
+    // option lists.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the menu button; also displayed as button text.
+    //   open — boolean, default false. Whether the menu is visible; bindable.
+    //   children — Snippet, required. Menu items, each should have role="menuitem" and tabindex="-1".
+    //   ...restProps — additional HTML attributes spread onto the outer wrapper <div>.
+    //
+    // Syntax:
+    //   <DropdownMenu label="Options" bind:open>
+    //     <li role="menuitem" tabindex="-1">Action</li>
+    //   </DropdownMenu>
+    //
+    // Examples:
+    //   <!-- Basic dropdown menu -->
+    //   <DropdownMenu label="Options" bind:open>
+    //     <li role="menuitem" tabindex="-1">Edit</li>
+    //     <li role="menuitem" tabindex="-1">Duplicate</li>
+    //     <li role="menuitem" tabindex="-1">Delete</li>
+    //   </DropdownMenu>
+    //
+    //   <!-- With action handler -->
+    //   <DropdownMenu label="Actions" bind:open={menuOpen}>
+    //     <li role="menuitem" tabindex="-1" onclick={() => handleAction('edit')}>Edit</li>
+    //     <li role="menuitem" tabindex="-1" onclick={() => handleAction('delete')}>Delete</li>
+    //   </DropdownMenu>
+    //
+    // Keyboard:
+    //   - Enter/Space on button: toggles the menu open/closed
+    //   - ArrowDown: moves focus to the next menu item (wraps to first)
+    //   - ArrowUp: moves focus to the previous menu item (wraps to last)
+    //   - Home: moves focus to the first menu item
+    //   - End: moves focus to the last menu item
+    //   - Escape: closes the menu
+    //
+    // Accessibility:
+    //   - aria-haspopup="true" on the trigger button indicates it opens a menu
+    //   - aria-expanded communicates whether the menu is shown
+    //   - aria-label on both button and menu provides accessible names
+    //   - role="menu" on the menu container identifies it as a menu widget
+    //   - Consumer provides role="menuitem" on each child item
+    //
+    // Internationalization:
+    //   - The label prop accepts any string; consumers provide localized text
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Auto-focuses first menuitem on open via $effect
+    //   - Menu items discovered dynamically via querySelectorAll("[role='menuitem']")
+    //   - Arrow navigation wraps around from last to first and vice versa
+    //
+    // References:
+    //   - WAI-ARIA Menu Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/
+    //   - WAI-ARIA menu role: https://www.w3.org/TR/wai-aria-1.2/#menu
+    //   - WAI-ARIA menuitem role: https://www.w3.org/TR/wai-aria-1.2/#menuitem
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        open = $bindable(false),
+        children,
+        ...restProps
+    }: {
+        /** Accessible name for the menu button. */
+        label: string;
+        /** Whether the menu is open. Bindable. */
+        open?: boolean;
+        /** Menu items. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let menuRef: HTMLElement | undefined = $state(undefined);
+
+    // Focus the first menuitem when the menu opens.
+    $effect(() => {
+        if (open && menuRef) {
+            const first =
+                menuRef.querySelector<HTMLElement>("[role='menuitem']");
+            first?.focus();
+        }
+    });
+
+    function toggleMenu() {
+        open = !open;
+    }
+
+    function onMenuKeydown(event: KeyboardEvent) {
+        if (!menuRef) return;
+        const items = Array.from(
+            menuRef.querySelectorAll<HTMLElement>("[role='menuitem']"),
+        );
+        const current = document.activeElement as HTMLElement;
+        const index = items.indexOf(current);
+
+        switch (event.key) {
+            case "ArrowDown": {
+                event.preventDefault();
+                const next = index < items.length - 1 ? index + 1 : 0;
+                items[next]?.focus();
+                break;
+            }
+            case "ArrowUp": {
+                event.preventDefault();
+                const prev = index > 0 ? index - 1 : items.length - 1;
+                items[prev]?.focus();
+                break;
+            }
+            case "Home": {
+                event.preventDefault();
+                items[0]?.focus();
+                break;
+            }
+            case "End": {
+                event.preventDefault();
+                items[items.length - 1]?.focus();
+                break;
+            }
+            case "Escape": {
+                event.preventDefault();
+                open = false;
+                break;
+            }
+        }
+    }
+</script>
+
+<!-- DropdownMenu.svelte -->
+<div
+    class={`dropdown-menu ${className}`}
+    {...restProps}
+>
+    <button
+        type="button"
+        aria-haspopup="true"
+        aria-expanded={open}
+        aria-label={label}
+        onclick={toggleMenu}
+    >
+        {label}
+    </button>
+    {#if open}
+        <div
+            role="menu"
+            aria-label={label}
+            bind:this={menuRef}
+            onkeydown={onMenuKeydown}
+        >
+            {@render children?.()}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the menu button. */
+    label: string;
+    /** Whether the menu is open. Bindable. */
+    open?: boolean;
+    /** Menu items. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const DropdownMenu: import("svelte").Component<$$ComponentProps, {}, "open">;
+type DropdownMenu = ReturnType<typeof DropdownMenu>;
+export default DropdownMenu;

package/dist/components/Editable/Editable.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+    // Editable component
+    //
+    // An inline-editable text component that toggles between a read-only display
+    // and an input field for editing. In display mode it renders a <span> with
+    // role="button"; in edit mode it renders an <input type="text">. Pressing
+    // Enter confirms the edit and Escape cancels it, reverting to the original value.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value — string, default "". Current text value; bindable.
+    //   label — string, required. Accessible name for the editable control.
+    //   editing — boolean, default false. Whether the component is in edit mode; bindable.
+    //   disabled — boolean, default false. Whether editing is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <span> or <input>.
+    //
+    // Syntax:
+    //   <Editable label="Name" bind:value />
+    //
+    // Examples:
+    //   <!-- Basic inline edit -->
+    //   <Editable label="Name" bind:value />
+    //
+    //   <!-- With external editing state control -->
+    //   <Editable label="Title" bind:value bind:editing />
+    //
+    // Keyboard:
+    //   - Enter (display mode): activate edit mode
+    //   - Space (display mode): activate edit mode
+    //   - Enter (edit mode): confirm the edit and return to display mode
+    //   - Escape (edit mode): cancel the edit and return to display mode
+    //
+    // Accessibility:
+    //   - role="button" on the display span indicates it is activatable
+    //   - aria-label provides the accessible name in both modes
+    //   - aria-disabled on the span when disabled
+    //   - tabindex="0" when enabled, tabindex="-1" when disabled
+    //
+    // Internationalization:
+    //   - The label prop accepts any string; consumers provide localized text
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Uses internal draft state to allow cancel without losing original value
+    //   - Both value and editing support $bindable() two-way binding
+    //
+    // References:
+    //   - WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+
+    let {
+        class: className = "",
+        value = $bindable(""),
+        label,
+        editing = $bindable(false),
+        disabled = false,
+        ...restProps
+    }: {
+        /** Current text value. Bindable. */
+        value?: string;
+        /** Accessible label for the editable control. */
+        label: string;
+        /** Whether the component is in edit mode. Bindable. */
+        editing?: boolean;
+        /** Whether editing is disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+
+    let draft = $state(value);
+
+    function startEditing() {
+        if (disabled) return;
+        draft = value;
+        editing = true;
+    }
+
+    function confirm() {
+        value = draft;
+        editing = false;
+    }
+
+    function cancel() {
+        draft = value;
+        editing = false;
+    }
+
+    function onkeydown(event: KeyboardEvent) {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            confirm();
+        } else if (event.key === "Escape") {
+            event.preventDefault();
+            cancel();
+        }
+    }
+</script>
+
+<!-- Editable.svelte -->
+{#if editing}
+    <input
+        class={`editable ${className}`}
+        type="text"
+        aria-label={label}
+        bind:value={draft}
+        {onkeydown}
+        {...restProps}
+    />
+{:else}
+    <span
+        class={`editable ${className}`}
+        role="button"
+        tabindex={disabled ? -1 : 0}
+        aria-label={label}
+        aria-disabled={disabled || undefined}
+        onclick={startEditing}
+        onkeydown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                startEditing();
+            }
+        }}
+        {...restProps}
+    >
+        {value}
+    </span>
+{/if}

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    /** Current text value. Bindable. */
+    value?: string;
+    /** Accessible label for the editable control. */
+    label: string;
+    /** Whether the component is in edit mode. Bindable. */
+    editing?: boolean;
+    /** Whether editing is disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const Editable: import("svelte").Component<$$ComponentProps, {}, "value" | "editing">;
+type Editable = ReturnType<typeof Editable>;
+export default Editable;

package/dist/components/EditableForm/EditableForm.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    // EditableForm component
+    //
+    // An editable form that wraps inline editing functionality in a <form> element,
+    // providing submit and cancel semantics with keyboard support. The form is only
+    // rendered when the editing prop is true. Useful for editing records in place,
+    // such as updating profiles, renaming items, or modifying settings.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the form.
+    //   editing — boolean, default false. Whether the form is in edit mode; bindable.
+    //   onsubmit — (event: SubmitEvent) => void, default undefined. Callback when the form is submitted.
+    //   oncancel — () => void, default undefined. Callback when editing is cancelled.
+    //   children — Snippet, required. Form content (inputs, buttons, etc.).
+    //   ...restProps — additional HTML attributes spread onto the <form> element.
+    //
+    // Syntax:
+    //   <EditableForm label="Edit profile" bind:editing onsubmit={save}>
+    //     <input name="name" />
+    //     <button type="submit">Save</button>
+    //   </EditableForm>
+    //
+    // Examples:
+    //   <!-- Basic editable form -->
+    //   <EditableForm label="Edit profile" bind:editing onsubmit={save}>
+    //     <input name="name" value={name} />
+    //     <button type="submit">Save</button>
+    //   </EditableForm>
+    //
+    //   <!-- With cancel callback and cancel button -->
+    //   <EditableForm label="Rename item" bind:editing onsubmit={rename} oncancel={revert}>
+    //     <input name="title" value={title} />
+    //     <button type="submit">OK</button>
+    //     <button type="button" onclick={() => editing = false}>Cancel</button>
+    //   </EditableForm>
+    //
+    // Keyboard:
+    //   - Enter: submits the form (native behavior), exits edit mode, calls onsubmit
+    //   - Escape: cancels editing, exits edit mode, calls oncancel
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for the form
+    //   - tabindex="-1" allows programmatic focus management
+    //
+    // Internationalization:
+    //   - The label prop accepts any string; consumers provide localized text
+    //   - All button and input labels come from consumer-provided children
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Form is removed from DOM when editing is false
+    //   - Uses $bindable() on editing for two-way state binding
+    //   - Calls event.preventDefault() on submit for consumer-controlled save logic
+    //
+    // References:
+    //   - WAI-ARIA Form Role: https://www.w3.org/WAI/ARIA/apd/roles/form/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        editing = $bindable(false),
+        onsubmit = undefined,
+        oncancel = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name for the form. */
+        label: string;
+        /** Whether the form is in edit mode. Bindable. */
+        editing?: boolean;
+        /** Called when form is submitted. */
+        onsubmit?: (event: SubmitEvent) => void;
+        /** Called when editing is cancelled. */
+        oncancel?: () => void;
+        /** Form content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    function handleSubmit(event: SubmitEvent) {
+        event.preventDefault();
+        editing = false;
+        onsubmit?.(event);
+    }
+
+    function handleKeydown(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            editing = false;
+            oncancel?.();
+        }
+    }
+</script>
+
+<!-- EditableForm.svelte -->
+{#if editing}
+    <form
+        class={`editable-form ${className}`}
+        aria-label={label}
+        tabindex="-1"
+        onsubmit={handleSubmit}
+        onkeydown={handleKeydown}
+        {...restProps}
+    >
+        {@render children?.()}
+    </form>
+{/if}

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the form. */
+    label: string;
+    /** Whether the form is in edit mode. Bindable. */
+    editing?: boolean;
+    /** Called when form is submitted. */
+    onsubmit?: (event: SubmitEvent) => void;
+    /** Called when editing is cancelled. */
+    oncancel?: () => void;
+    /** Form content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const EditableForm: import("svelte").Component<$$ComponentProps, {}, "editing">;
+type EditableForm = ReturnType<typeof EditableForm>;
+export default EditableForm;

package/dist/components/EestiIsikukoodInput/EestiIsikukoodInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // EestiIsikukoodInput component
+    //
+    // A headless input for entering Estonia's Isikukood (IK).
+    // Format: 11 digits in the form GYYMMDDSSSC: G is sex and century (odd male, even female; 1-2 19th c., 3-4 20th c., 5-6 21st c.), SSS distinguishes persons born the same day, C is a checksum.
+    //
+    // 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:
+    //   <EestiIsikukoodInput label="Personal Identification Code" 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#Estonia
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EestiIsikukoodInput.svelte -->
+<input
+    class={`eesti-isikukood-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/EestiIsikukoodView/EestiIsikukoodView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // EestiIsikukoodView component
+    //
+    // A headless display component for showing Estonia's
+    // Isikukood (IK) in a read-only format.
+    // Format: 11 digits in the form GYYMMDDSSSC: G is sex and century (odd male, even female; 1-2 19th c., 3-4 20th c., 5-6 21st c.), SSS distinguishes persons born the same day, C is a checksum.
+    //
+    // 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:
+    //   <EestiIsikukoodView label="Personal Identification Code" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_number#Estonia
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EestiIsikukoodView.svelte -->
+<span
+    class={`eesti-isikukood-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/EireIndividualHealthIdentifierInput/EireIndividualHealthIdentifierInput.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    // EireIndividualHealthIdentifierInput component
+    //
+    // A headless input for entering an Eire Individual Health Identifier (IHI),
+    // a 10-digit clinical identifier used by the HSE to safely match patients
+    // with their medical records across different hospitals and GPs.
+    //
+    // 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:
+    //   <EireIndividualHealthIdentifierInput label="IHI" bind:value />
+    //
+    // Examples:
+    //   <!-- Required IHI input -->
+    //   <EireIndividualHealthIdentifierInput label="IHI" required />
+    //
+    //   <!-- Disabled IHI input -->
+    //   <EireIndividualHealthIdentifierInput label="IHI" disabled />
+    //
+    // Keyboard:
+    //   - Standard text input keyboard behavior
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - inputmode="numeric" hints mobile devices to show numeric keyboard
+    //   - pattern="[0-9]{10}" validates 10-digit format
+    //   - autocomplete="off" protects sensitive health identifiers
+    //   - 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
+    //   - Uses $bindable() for two-way data binding on value
+    //   - Pattern constant avoids Svelte curly brace parsing
+    //
+    // References:
+    //   - HSE: https://www.hse.ie/
+
+    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();
+
+    const ihiPattern = "[0-9]{10}";
+</script>
+
+<!-- EireIndividualHealthIdentifierInput.svelte -->
+<input
+    class={`eire-individual-health-identifier-input ${className}`}
+    type="text"
+    aria-label={label}
+    inputmode="numeric"
+    pattern={ihiPattern}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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