@lilydesignsystem/svelte-headless 0.1.0

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    /** Accessible label for the toolbar (REQUIRED) */
+    label: string;
+    /** Count of currently selected items (REQUIRED) */
+    selectedCount: number;
+    /** Pre-formatted display of the count (REQUIRED) */
+    selectedCountLabel: string;
+    /** Accessible label for the clear-selection button */
+    clearSelectionLabel?: string;
+    /** Clear-selection click handler */
+    onClearSelection?: () => void;
+    /** Action button children */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ActionBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ActionBar = ReturnType<typeof ActionBar>;
+export default ActionBar;

package/dist/components/ActionBarButton/ActionBarButton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    // ActionBarButton component
+    //
+    // One action button inside an action bar. Renders a native `<button>`
+    // with a required accessible label. Children render the visible content
+    // (icon and/or text).
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label for the button.
+    //   type — "button" | "submit" | "reset", default "button".
+    //   disabled — boolean, default false.
+    //   onclick — (event: MouseEvent) => void, optional.
+    //   children — Snippet, optional. Button content.
+    //
+    // Syntax:
+    //   <ActionBarButton label="Delete" onclick={handleDelete}>Delete</ActionBarButton>
+    //
+    // Keyboard:
+    //   - Tab: focus
+    //   - Enter / Space: activate
+    //
+    // Accessibility:
+    //   - aria-label is required so icon-only buttons remain accessible
+    //
+    // Internationalization:
+    //   - Label and content come through props
+    //
+    // References:
+    //   - WAI-ARIA Button Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/button/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        type = "button",
+        disabled = false,
+        onclick = undefined,
+        children = undefined,
+        ...restProps
+    }: {
+        class?: string;
+        /** Accessible label (REQUIRED) */
+        label: string;
+        /** HTML button type */
+        type?: "button" | "submit" | "reset";
+        /** Whether the button is disabled */
+        disabled?: boolean;
+        /** Click handler */
+        onclick?: (event: MouseEvent) => void;
+        /** Button content */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ActionBarButton.svelte -->
+<button
+    class={`action-bar-button ${className}`}
+    {type}
+    {disabled}
+    aria-label={label}
+    {onclick}
+    {...restProps}
+>
+    {#if children}
+        {@render children?.()}
+    {/if}
+</button>

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

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    /** Accessible label (REQUIRED) */
+    label: string;
+    /** HTML button type */
+    type?: "button" | "submit" | "reset";
+    /** Whether the button is disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onclick?: (event: MouseEvent) => void;
+    /** Button content */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const ActionBarButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type ActionBarButton = ReturnType<typeof ActionBarButton>;
+export default ActionBarButton;

package/dist/components/ActionGroup/ActionGroup.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    // ActionGroup component
+    //
+    // A group of action buttons that can collapse to an overflow menu when
+    // space is constrained. Renders a `<div>` with `role="group"`. When the
+    // optional `overflow` snippet is provided, an overflow trigger button and
+    // overflow menu container are also rendered.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label for the group.
+    //   overflowOpen — boolean, default false. Whether overflow menu is open.
+    //   overflowLabel — string, optional. aria-label for the overflow trigger.
+    //   onOverflowToggle — () => void, optional. Trigger click handler.
+    //   children — Snippet, optional. Visible action buttons.
+    //   overflow — Snippet, optional. Overflow menu content.
+    //
+    // Syntax:
+    //   <ActionGroup label="Toolbar" {overflowOpen} onOverflowToggle={toggle}>
+    //       {#snippet overflow()}<Menu>…</Menu>{/snippet}
+    //       <button>Cut</button>
+    //       <button>Copy</button>
+    //   </ActionGroup>
+    //
+    // Accessibility:
+    //   - role="group" with aria-label
+    //   - overflow trigger has aria-haspopup="menu" and aria-expanded
+    //
+    // Internationalization:
+    //   - All user-facing text via props
+    //
+    // References:
+    //   - Adobe Spectrum ActionGroup: https://spectrum.adobe.com/page/action-group/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        overflowOpen = false,
+        overflowLabel = undefined,
+        onOverflowToggle = undefined,
+        children = undefined,
+        overflow = undefined,
+        ...restProps
+    }: {
+        class?: string;
+        /** Accessible label for the group (REQUIRED) */
+        label: string;
+        /** Whether the overflow menu is open */
+        overflowOpen?: boolean;
+        /** Accessible label for the overflow trigger button */
+        overflowLabel?: string;
+        /** Click handler for the overflow trigger */
+        onOverflowToggle?: () => void;
+        /** Visible action buttons */
+        children?: Snippet;
+        /** Overflow menu content */
+        overflow?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ActionGroup.svelte -->
+<div
+    class={`action-group ${className}`}
+    role="group"
+    aria-label={label}
+    {...restProps}
+>
+    {#if children}
+        {@render children?.()}
+    {/if}
+    {#if overflow}
+        <button
+            class="action-group-overflow-trigger"
+            type="button"
+            aria-haspopup="menu"
+            aria-expanded={overflowOpen}
+            aria-label={overflowLabel}
+            onclick={onOverflowToggle}
+        >…</button>
+        <div class="action-group-overflow-menu" hidden={!overflowOpen}>
+            {@render overflow()}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    /** Accessible label for the group (REQUIRED) */
+    label: string;
+    /** Whether the overflow menu is open */
+    overflowOpen?: boolean;
+    /** Accessible label for the overflow trigger button */
+    overflowLabel?: string;
+    /** Click handler for the overflow trigger */
+    onOverflowToggle?: () => void;
+    /** Visible action buttons */
+    children?: Snippet;
+    /** Overflow menu content */
+    overflow?: Snippet;
+    [key: string]: unknown;
+};
+declare const ActionGroup: import("svelte").Component<$$ComponentProps, {}, "">;
+type ActionGroup = ReturnType<typeof ActionGroup>;
+export default ActionGroup;

package/dist/components/ActionLink/ActionLink.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    // ActionLink component
+    //
+    // A headless action link that renders a semantic <a> element for prominent
+    // navigation actions. Inspired by the NHS England action link pattern.
+    // Use when you want to draw attention to a key navigational step, such as
+    // "Continue to next step", "Find a service near you", or "Start application",
+    // distinguishing these from standard inline text links.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   href     — string, required. The URL the link points to.
+    //   label    — string, optional. Accessible label override via aria-label
+    //              for when visible link text is insufficient for screen readers.
+    //   children — Snippet, required. The link content (text or mixed content).
+    //   ...restProps — additional HTML anchor attributes spread onto <a>.
+    //
+    // Syntax:
+    //   <ActionLink href="/path">Link text</ActionLink>
+    //
+    // Examples:
+    //   <!-- Basic action link -->
+    //   <ActionLink href="/next-step">Continue to next step</ActionLink>
+    //
+    //   <!-- With accessible label override -->
+    //   <ActionLink href="/find" label="Find a GP surgery near you">
+    //     Find a GP
+    //   </ActionLink>
+    //
+    //   <!-- With custom attributes -->
+    //   <ActionLink href="/apply" data-track="apply-cta">
+    //     Start your application
+    //   </ActionLink>
+    //
+    // Keyboard:
+    //   - Tab: Focus the link (native browser behavior)
+    //   - Enter: Activate the link (native browser behavior)
+    //
+    // Accessibility:
+    //   - Implicit link role from the <a> element
+    //   - aria-label provides screen reader override when link text is insufficient
+    //   - Ensure link text clearly describes the destination or action
+    //
+    // Internationalization:
+    //   - All text content comes through children snippet and label prop
+    //   - No hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Always require href prop; do not use <a> without href
+    //   - Do not add icons or visual indicators; consumer provides those
+    //
+    // References:
+    //   - NHS England action link pattern
+    //   - WAI-ARIA link role: https://www.w3.org/TR/wai-aria-1.2/#link
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        href,
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        /** The URL the link points to */
+        href: string;
+        /** Accessible label override for screen readers */
+        label?: string;
+        /** The link content (text, icons, etc.) */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ActionLink.svelte -->
+<a
+    class={`action-link ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</a>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The URL the link points to */
+    href: string;
+    /** Accessible label override for screen readers */
+    label?: string;
+    /** The link content (text, icons, etc.) */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ActionLink: import("svelte").Component<$$ComponentProps, {}, "">;
+type ActionLink = ReturnType<typeof ActionLink>;
+export default ActionLink;

package/dist/components/AddressInput/AddressInput.svelte

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

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

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

package/dist/components/AddressographBox/AddressographBox.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>
+
+<!-- AddressographBox.svelte -->
+<div class={`addressograph-box ${className}`} aria-label={label} {...restProps}>
+    {@render children?.()}
+</div>

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

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

package/dist/components/Affix/Affix.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // Affix component
+    //
+    // A wrapper that pins its content to a viewport position while the page scrolls.
+    // Uses CSS `position: sticky` as the headless behavior so consumers do not
+    // need extra JavaScript. Either `offsetTop` or `offsetBottom` controls the
+    // sticky position; if neither is given, the element pins to top: 0.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   offsetTop — number (px), optional. Distance from the top edge when affixed.
+    //   offsetBottom — number (px), optional. Distance from the bottom edge when affixed.
+    //   children — Snippet, required. The content to be pinned.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Affix offsetTop={64}>{#snippet children()}…{/snippet}</Affix>
+    //
+    // Examples:
+    //   <Affix offsetTop={0}>Sticky toolbar</Affix>
+    //   <Affix offsetBottom={16}>Bottom-anchored controls</Affix>
+    //
+    // Accessibility:
+    //   - Purely structural; no ARIA roles or states.
+    //
+    // Internationalization:
+    //   - No user-facing strings.
+    //
+    // Claude rules:
+    //   - Headless: inline `position: sticky` style is documented behavior.
+    //   - Data attributes expose offsets so consumer CSS can hook in.
+    //
+    // References:
+    //   - Ant Design Affix: https://ant.design/components/affix
+    //   - MDN position: sticky: https://developer.mozilla.org/en-US/docs/Web/CSS/position#sticky_positioning
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        offsetTop = undefined,
+        offsetBottom = undefined,
+        children,
+        ...restProps
+    }: {
+        /** CSS class appended to the base class */
+        class?: string;
+        /** Distance from top edge when affixed, in pixels */
+        offsetTop?: number;
+        /** Distance from bottom edge when affixed, in pixels */
+        offsetBottom?: number;
+        /** Pinned content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const stickyStyle = $derived.by(() => {
+        if (offsetBottom !== undefined) {
+            return `position: sticky; bottom: ${offsetBottom}px;`;
+        }
+        const top = offsetTop ?? 0;
+        return `position: sticky; top: ${top}px;`;
+    });
+</script>
+
+<!-- Affix.svelte -->
+<div
+    class={`affix ${className}`}
+    style={stickyStyle}
+    data-offset-top={offsetTop}
+    data-offset-bottom={offsetBottom}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** CSS class appended to the base class */
+    class?: string;
+    /** Distance from top edge when affixed, in pixels */
+    offsetTop?: number;
+    /** Distance from bottom edge when affixed, in pixels */
+    offsetBottom?: number;
+    /** Pinned content */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Affix: import("svelte").Component<$$ComponentProps, {}, "">;
+type Affix = ReturnType<typeof Affix>;
+export default Affix;

package/dist/components/AiLabel/AiLabel.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+    // AiLabel component
+    //
+    // A headless inline indicator that communicates the presence of AI-generated
+    // content and provides a pathway to AI explainability. Renders a <span> element
+    // with visible text and accessible labelling. Used wherever AI is generating,
+    // modifying, or enhancing content to reinforce AI transparency, accountability,
+    // and explainability.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, default "AI". Accessible name via aria-label.
+    //   text — string, default "AI". Visible text displayed inside the indicator.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <AiLabel />
+    //   <AiLabel text="AI generated" label="AI generated content" />
+    //
+    // Examples:
+    //   <p>This summary was created by <AiLabel /> based on your documents.</p>
+    //
+    // Keyboard:
+    //   - None at component level; wrap in <button> for interactive explainability
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name for the AI indicator
+    //
+    // Internationalization:
+    //   - The text and label props are the only user-facing strings
+    //   - Consumer provides localized values for both props
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Renders a bare <span> — no wrapper elements
+    //
+    // References:
+    //   - Carbon Design System AI Label: https://carbondesignsystem.com/components/ai-label/usage/
+
+    let {
+        class: className = "",
+        label = "AI",
+        text = "AI",
+        ...restProps
+    }: {
+        /** Accessible name for the indicator. */
+        label?: string;
+        /** Visible text displayed. */
+        text?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AiLabel.svelte -->
+<span
+    class={`ai-label ${className}`}
+    aria-label={label}
+    {...restProps}
+>{text}</span>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible name for the indicator. */
+    label?: string;
+    /** Visible text displayed. */
+    text?: string;
+    [key: string]: unknown;
+};
+declare const AiLabel: import("svelte").Component<$$ComponentProps, {}, "">;
+type AiLabel = ReturnType<typeof AiLabel>;
+export default AiLabel;

package/dist/components/AlbaCommunityHealthIndexInput/AlbaCommunityHealthIndexInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // AlbaCommunityHealthIndexInput component
+    //
+    // A headless input for entering Scotland's Community Health Index (CHI).
+    // Format: 10 digits encoding date of birth (DDMMYY) + two random digits + a sex digit (odd male, even female) + a Modulus-11 check digit.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <AlbaCommunityHealthIndexInput label="Community Health Index" 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_Health_Service_Central_Register
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AlbaCommunityHealthIndexInput.svelte -->
+<input
+    class={`alba-community-health-index-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/AlbaCommunityHealthIndexView/AlbaCommunityHealthIndexView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // AlbaCommunityHealthIndexView component
+    //
+    // A headless display component for showing Scotland's
+    // Community Health Index (CHI) in a read-only format.
+    // Format: 10 digits encoding date of birth (DDMMYY) + two random digits + a sex digit (odd male, even female) + a Modulus-11 check digit.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The identifier string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <AlbaCommunityHealthIndexView label="Community Health Index" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_Health_Service_Central_Register
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AlbaCommunityHealthIndexView.svelte -->
+<span
+    class={`alba-community-health-index-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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