@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/ErrorMessage/ErrorMessage.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // ErrorMessage component
+    //
+    // Displays an error message using role="alert" for immediate screen reader
+    // announcement. Renders a <p> element that acts as an assertive live region,
+    // so the error text is announced as soon as it enters the DOM. Used for form
+    // validation feedback, system error notifications, and inline error display.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Error message text content.
+    //   ...restProps — additional HTML attributes spread onto the <p> element.
+    //
+    // Syntax:
+    //   <ErrorMessage>Error text here</ErrorMessage>
+    //
+    // Examples:
+    //   <!-- Inline error message -->
+    //   <ErrorMessage>Password is required</ErrorMessage>
+    //
+    //   <!-- Conditional error display -->
+    //   {#if error}
+    //     <ErrorMessage>{error}</ErrorMessage>
+    //   {/if}
+    //
+    // Keyboard:
+    //   - None — passive container for displaying error text
+    //
+    // Accessibility:
+    //   - role="alert" creates an implicit aria-live="assertive" live region
+    //   - Error text is announced immediately to screen readers when it appears
+    //
+    // Internationalization:
+    //   - All error text comes through consumer-provided children
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Uses role="alert" for immediate announcement, not aria-live="polite"
+    //
+    // References:
+    //   - WAI-ARIA Alert Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** Error message content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ErrorMessage.svelte -->
+<p
+    class={`error-message ${className}`}
+    role="alert"
+    {...restProps}
+>
+    {@render children?.()}
+</p>

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

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

package/dist/components/ErrorSummary/ErrorSummary.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    // ErrorSummary component
+    //
+    // Displays a consolidated list of form validation errors at the top of a form.
+    // Uses role="alert" and aria-labelledby for immediate screen reader announcement.
+    // The tabindex="-1" allows programmatic focus after form submission. Children
+    // typically contain a list of linked error messages pointing to specific fields.
+    // Follows the GOV.UK and NHS England error summary design pattern.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   title — string, required. Heading text for the error summary (e.g., "There is a problem").
+    //   children — Snippet, required. Error list content, typically a <ul> with <li> anchor links.
+    //   ...restProps — additional HTML attributes spread onto the outer <div>.
+    //
+    // Syntax:
+    //   <ErrorSummary title="There is a problem">
+    //     <ul><li><a href="#field">Error description</a></li></ul>
+    //   </ErrorSummary>
+    //
+    // Examples:
+    //   <!-- Error summary with linked errors -->
+    //   <ErrorSummary title="There is a problem">
+    //     <ul>
+    //       <li><a href="#name">Enter your name</a></li>
+    //       <li><a href="#email">Enter a valid email address</a></li>
+    //     </ul>
+    //   </ErrorSummary>
+    //
+    //   <!-- Single error -->
+    //   <ErrorSummary title="Please fix the following errors">
+    //     <ul>
+    //       <li><a href="#password">Password must be at least 8 characters</a></li>
+    //     </ul>
+    //   </ErrorSummary>
+    //
+    // Keyboard:
+    //   - Tab: moves focus through the error links within the summary
+    //   - The container can receive programmatic focus via element.focus()
+    //
+    // Accessibility:
+    //   - role="alert" creates a live region announced immediately by screen readers
+    //   - aria-labelledby associates the alert region with its heading
+    //   - tabindex="-1" allows programmatic focus without being in the tab order
+    //   - Contains an <h2> heading for the error summary title
+    //
+    // Internationalization:
+    //   - The title prop accepts any string; consumers provide localized text
+    //   - All error messages come through consumer-provided children
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Generates a unique heading ID via Math.random() for aria-labelledby
+    //   - Consumer should call element.focus() after form submission to direct attention
+    //
+    // References:
+    //   - GOV.UK Error Summary: https://design-system.service.gov.uk/components/error-summary/
+    //   - WAI-ARIA Alert Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        title,
+        children,
+        ...restProps
+    }: {
+        /** Heading for the error summary. */
+        title: string;
+        /** Error list content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    const titleId = `error-summary-${uid}`;
+</script>
+
+<div
+    class={`error-summary ${className}`}
+    role="alert"
+    aria-labelledby={titleId}
+    tabindex="-1"
+    {...restProps}
+>
+    <h2 id={titleId}>{title}</h2>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Heading for the error summary. */
+    title: string;
+    /** Error list content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ErrorSummary: import("svelte").Component<$$ComponentProps, {}, "">;
+type ErrorSummary = ReturnType<typeof ErrorSummary>;
+export default ErrorSummary;

package/dist/components/EspanaCodigoDeIdentificacionFiscalInput/EspanaCodigoDeIdentificacionFiscalInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // EspanaCodigoDeIdentificacionFiscalInput component
+    //
+    // A headless input for entering Spain's Código de Identificación Fiscal (CIF).
+    // Format: 9 characters: 8 numbers and a control letter (the letters I, Ñ, O, and U are not used).
+    //
+    // 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:
+    //   <EspanaCodigoDeIdentificacionFiscalInput label="Tax 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/VAT_identification_number#Spain
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EspanaCodigoDeIdentificacionFiscalInput.svelte -->
+<input
+    class={`espana-codigo-de-identificacion-fiscal-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/EspanaCodigoDeIdentificacionFiscalView/EspanaCodigoDeIdentificacionFiscalView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // EspanaCodigoDeIdentificacionFiscalView component
+    //
+    // A headless display component for showing Spain's
+    // Código de Identificación Fiscal (CIF) in a read-only format.
+    // Format: 9 characters: 8 numbers and a control letter (the letters I, Ñ, O, and U are not used).
+    //
+    // 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:
+    //   <EspanaCodigoDeIdentificacionFiscalView label="Tax Identification Code" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/VAT_identification_number#Spain
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EspanaCodigoDeIdentificacionFiscalView.svelte -->
+<span
+    class={`espana-codigo-de-identificacion-fiscal-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/EspanaTarjetaSanitariaIndividualInput/EspanaTarjetaSanitariaIndividualInput.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    // EspanaTarjetaSanitariaIndividualInput component
+    //
+    // A headless input for entering a España Tarjeta Sanitaria Individual (TSI),
+    // the unique Spanish national healthcare identifier (CIP-SNS). The format
+    // varies by Autonomous Community but typically starts with 4 region digits
+    // followed by alphanumeric characters.
+    //
+    // 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:
+    //   <EspanaTarjetaSanitariaIndividualInput label="TSI" bind:value />
+    //
+    // Examples:
+    //   <!-- Required TSI input -->
+    //   <EspanaTarjetaSanitariaIndividualInput label="TSI" required />
+    //
+    //   <!-- Disabled TSI input -->
+    //   <EspanaTarjetaSanitariaIndividualInput label="TSI" disabled />
+    //
+    // Keyboard:
+    //   - Standard text input keyboard behavior
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - 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
+    //
+    // References:
+    //   - Ministerio de Sanidad: https://www.sanidad.gob.es/
+
+    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();
+</script>
+
+<!-- EspanaTarjetaSanitariaIndividualInput.svelte -->
+<input
+    class={`espana-tarjeta-sanitaria-individual-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

package/dist/components/EspanaTarjetaSanitariaIndividualView/EspanaTarjetaSanitariaIndividualView.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    // EspanaTarjetaSanitariaIndividualView component
+    //
+    // A headless display component for showing a España Tarjeta Sanitaria
+    // Individual (TSI) / CIP-SNS in a read-only format. The TSI is the unique
+    // Spanish national healthcare identifier printed on the tarjeta sanitaria.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label via aria-label.
+    //   value — string, default "". The TSI string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <EspanaTarjetaSanitariaIndividualView label="TSI" value="BBBB12345678" />
+    //
+    // Keyboard:
+    //   - None -- passive display-only component
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Companion to EspanaTarjetaSanitariaIndividualInput
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- EspanaTarjetaSanitariaIndividualView.svelte -->
+<span
+    class={`espana-tarjeta-sanitaria-individual-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span>

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

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

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

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

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

package/dist/components/Expander/Expander.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    // Expander component
+    //
+    // An expander that shows or hides additional content with a toggle button.
+    // Similar to native <details>/<summary> but uses a <button> trigger with
+    // aria-expanded and aria-controls for full control over behavior. Useful for
+    // FAQ sections, collapsible panels, settings groups, and progressive disclosure.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Button text and accessible name for both the button and content region.
+    //   expanded — boolean, default false. Whether the content is visible; bindable.
+    //   children — Snippet, required. Expandable content rendered when expanded is true.
+    //   ...restProps — additional HTML attributes spread onto the outer <div> wrapper.
+    //
+    // Syntax:
+    //   <Expander label="Show details" bind:expanded>Content</Expander>
+    //
+    // Examples:
+    //   <!-- Basic expander -->
+    //   <Expander label="Show details" bind:expanded>
+    //     <p>Details here...</p>
+    //   </Expander>
+    //
+    //   <!-- Advanced settings panel -->
+    //   <Expander label="Advanced settings" bind:expanded={showAdvanced}>
+    //     <form>...</form>
+    //   </Expander>
+    //
+    // Keyboard:
+    //   - Enter: toggles the expander open/closed (native button behavior)
+    //   - Space: toggles the expander open/closed (native button behavior)
+    //   - Tab: moves focus to/from the toggle button
+    //
+    // Accessibility:
+    //   - aria-expanded on the button indicates whether content is visible
+    //   - aria-controls references the ID of the expandable content region
+    //   - role="region" on the content container identifies the expandable area
+    //   - aria-label on the content region provides an accessible name
+    //
+    // Internationalization:
+    //   - The label prop accepts any string; consumers provide localized text
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Generates unique contentId via Math.random() for aria-controls/id link
+    //   - Content removed from DOM when collapsed (not just hidden)
+    //   - Uses $bindable() on expanded for two-way state binding
+    //
+    // References:
+    //   - WAI-ARIA Disclosure Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        expanded = $bindable(false),
+        children,
+        ...restProps
+    }: {
+        /** Button label / accessible name. */
+        label: string;
+        /** Whether the content is expanded. Bindable. */
+        expanded?: boolean;
+        /** Expandable content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    const contentId = `expander-${uid}`;
+</script>
+
+<div
+    class={`expander ${className}`}
+    {...restProps}
+>
+    <button
+        type="button"
+        aria-expanded={expanded}
+        aria-controls={contentId}
+        onclick={() => (expanded = !expanded)}
+    >
+        {label}
+    </button>
+    {#if expanded}
+        <div
+            id={contentId}
+            role="region"
+            aria-label={label}
+        >
+            {@render children?.()}
+        </div>
+    {/if}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Button label / accessible name. */
+    label: string;
+    /** Whether the content is expanded. Bindable. */
+    expanded?: boolean;
+    /** Expandable content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Expander: import("svelte").Component<$$ComponentProps, {}, "expanded">;
+type Expander = ReturnType<typeof Expander>;
+export default Expander;

package/dist/components/FeatureCard/FeatureCard.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    // FeatureCard component
+    //
+    // A large content card with a prominent image positioned alongside or
+    // above the text. Renders a native <article> landmark with a labelled
+    // accessible name. The `heading` prop is required; the visible heading
+    // also serves as the default aria-label.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   heading — string, REQUIRED. Card heading.
+    //   imagePosition — "start" | "end" | "top", default "start".
+    //   imageUrl — string, optional. Image URL.
+    //   imageAlt — string, optional. Image alt text.
+    //   description — string, optional. Body text.
+    //   label — string, optional. aria-label override (defaults to heading).
+    //   children — Snippet, optional. Additional content e.g. CTAs.
+    //   ...restProps — additional HTML attributes spread onto the <article>.
+    //
+    // Syntax:
+    //   <FeatureCard heading="Privacy first" description="Your data stays yours." imageUrl="/img.png" imageAlt="" />
+    //
+    // Accessibility:
+    //   - article landmark with aria-label
+    //
+    // Internationalization:
+    //   - All text content via props
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - heading is REQUIRED — TypeScript reflects this
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        heading,
+        imagePosition = "start",
+        imageUrl = undefined,
+        imageAlt = undefined,
+        description = undefined,
+        label = undefined,
+        children = undefined,
+        ...restProps
+    }: {
+        /** Consumer CSS class appended to base class */
+        class?: string;
+        /** Card heading (REQUIRED) */
+        heading: string;
+        /** Where the image sits relative to text */
+        imagePosition?: "start" | "end" | "top";
+        /** Image URL */
+        imageUrl?: string;
+        /** Image alt text */
+        imageAlt?: string;
+        /** Body text */
+        description?: string;
+        /** aria-label override (defaults to heading) */
+        label?: string;
+        /** Additional content e.g. CTAs */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- FeatureCard.svelte -->
+<article
+    class={`feature-card ${className}`}
+    data-image-position={imagePosition}
+    aria-label={label || heading}
+    {...restProps}
+>
+    {#if imageUrl}
+        <img class="feature-card-image" src={imageUrl} alt={imageAlt ?? ""} />
+    {/if}
+    <header class="feature-card-header">
+        <h3 class="feature-card-heading">{heading}</h3>
+    </header>
+    {#if description}
+        <p class="feature-card-description">{description}</p>
+    {/if}
+    {#if children}{@render children?.()}{/if}
+</article>