@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/Form/Form.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    // Form component
+    //
+    // A form wrapper that wraps a native HTML <form> element with accessible labeling,
+    // automatic submit default prevention, and reset support. It simplifies form handling
+    // by intercepting the submit event and calling preventDefault() before passing it to
+    // the consumer's callback, which is the most common pattern in single-page applications.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the form via aria-label.
+    //   onsubmit — function, default undefined. Callback receiving SubmitEvent (default already prevented).
+    //   onreset — function, default undefined. Callback receiving Event on form reset.
+    //   children — Snippet, required. Form content (inputs, buttons, etc.).
+    //   ...restProps — additional HTML attributes spread onto the form element.
+    //
+    // Syntax:
+    //   <Form label="Login" onsubmit={handleLogin}>{children}</Form>
+    //
+    // Examples:
+    //   <!-- Login form with submit handler -->
+    //   <Form label="Login" onsubmit={handleLogin}>
+    //     <input name="email" />
+    //     <button type="submit">Sign in</button>
+    //   </Form>
+    //
+    //   <!-- Form with reset handler -->
+    //   <Form label="Search filters" onsubmit={applyFilters} onreset={clearFilters}>
+    //     <input name="query" />
+    //     <button type="submit">Apply</button>
+    //     <button type="reset">Clear</button>
+    //   </Form>
+    //
+    // Keyboard:
+    //   - Enter: Submits the form when a text input is focused (native browser behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name for the form, helping screen readers identify its purpose
+    //
+    // Internationalization:
+    //   - The label prop allows localized accessible names; no hardcoded user-facing strings
+    //   - All content comes through the children snippet
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Automatically calls event.preventDefault() on submit before invoking onsubmit
+    //   - The onreset callback is passed directly without default prevention
+    //
+    // References:
+    //   - MDN form element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
+    //   - WAI Forms Tutorial: https://www.w3.org/WAI/tutorials/forms/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        onsubmit = undefined,
+        onreset = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name. */
+        label: string;
+        /** Submit callback. */
+        onsubmit?: (event: SubmitEvent) => void;
+        /** Reset callback. */
+        onreset?: (event: Event) => void;
+        /** Form content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    function handleSubmit(event: SubmitEvent) {
+        event.preventDefault();
+        onsubmit?.(event);
+    }
+</script>
+
+<!-- Form.svelte -->
+<form
+    class={`form ${className}`}
+    aria-label={label}
+    onsubmit={handleSubmit}
+    {onreset}
+    {...restProps}
+>
+    {@render children?.()}
+</form>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name. */
+    label: string;
+    /** Submit callback. */
+    onsubmit?: (event: SubmitEvent) => void;
+    /** Reset callback. */
+    onreset?: (event: Event) => void;
+    /** Form content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Form: import("svelte").Component<$$ComponentProps, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;

package/dist/components/Framer/Framer.svelte

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

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

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

package/dist/components/FranceNumeroDIdentificationAuRepertoireInput/FranceNumeroDIdentificationAuRepertoireInput.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+    // FranceNumeroDIdentificationAuRepertoireInput component
+    //
+    // A headless input for entering a France numéro d'identification au répertoire
+    // (NIR), the unique 15-digit French national healthcare identifier printed on
+    // the Carte Vitale. The standard display format is "X XX XX XX XXX XXX XX".
+    // The component enforces this pattern, uses a numeric keyboard hint for mobile,
+    // and disables autocomplete to protect sensitive health information.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <FranceNumeroDIdentificationAuRepertoireInput label="NIR" bind:value />
+    //
+    // Examples:
+    //   <!-- Required NIR input -->
+    //   <FranceNumeroDIdentificationAuRepertoireInput label="NIR" required />
+    //
+    //   <!-- Disabled NIR input -->
+    //   <FranceNumeroDIdentificationAuRepertoireInput label="NIR" disabled />
+    //
+    // Keyboard:
+    //   - Standard text input keyboard behavior
+    //   - Users type digits and spaces in the format X XX XX XX XXX XXX XX
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - inputmode="numeric" hints mobile devices to show a numeric keyboard
+    //   - pattern enforces X XX XX XX XXX XXX XX format on form validation
+    //   - 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
+    //   - Pattern is defined as a constant to avoid Svelte curly brace parsing
+    //   - Uses $bindable() for two-way data binding on value
+    //
+    // References:
+    //   - Ameli.fr: https://www.ameli.fr/assure/droits-demarches/principes/numero-securite-sociale
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The current value of the input, bindable */
+        value?: string;
+        /** Whether the input is required for form submission */
+        required?: boolean;
+        /** Whether the input is disabled */
+        disabled?: boolean;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+
+    // Pattern for NIR format: X XX XX XX XXX XXX XX
+    // Defined as a constant to avoid Svelte template expression parsing of curly braces
+    const nirPattern = "[0-9]{1} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{3} [0-9]{3} [0-9]{2}";
+</script>
+
+<!-- FranceNumeroDIdentificationAuRepertoireInput.svelte -->
+<input
+    class={`france-numero-d-identification-au-repertoire-input ${className}`}
+    type="text"
+    aria-label={label}
+    inputmode="numeric"
+    pattern={nirPattern}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

package/dist/components/FranceNumeroDIdentificationAuRepertoireView/FranceNumeroDIdentificationAuRepertoireView.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // FranceNumeroDIdentificationAuRepertoireView component
+    //
+    // A headless display component for showing a France numéro d'identification
+    // au répertoire (NIR) in a read-only format. Renders the number as an inline
+    // <span> element with an accessible label. Suitable for patient records,
+    // summaries, confirmation screens, or any context where a NIR needs
+    // to be displayed but not edited. This is the View counterpart to the Input
+    // component in the Input/View pattern.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The NIR string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <FranceNumeroDIdentificationAuRepertoireView label="NIR" value="1 85 05 75 012 345 67" />
+    //
+    // Examples:
+    //   <!-- Display patient NIR -->
+    //   <FranceNumeroDIdentificationAuRepertoireView label="Numéro de sécurité sociale" value={nir} />
+    //
+    // Keyboard:
+    //   - None -- passive display-only component
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //   - Screen readers announce the label followed by the text content (the number)
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //   - No hardcoded strings in the component
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - No formatting or validation; consumer provides the value pre-formatted
+    //   - Read-only display; pairs with Input component for editing
+    //
+    // References:
+    //   - Ameli.fr: https://www.ameli.fr/assure/droits-demarches/principes/numero-securite-sociale
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        /** Accessible label for screen readers */
+        label: string;
+        /** The NIR to display */
+        value?: string;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- FranceNumeroDIdentificationAuRepertoireView.svelte -->
+<span
+    class={`france-numero-d-identification-au-repertoire-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/GanttTable/GanttTable.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    // GanttTable component
+    //
+    // An interactive Gantt table that displays project tasks and their timelines
+    // as a structured grid widget. Renders a <table> element with role="grid" and
+    // an accessible label. Supports an optional visible caption. Commonly used in
+    // project management tools and resource planning applications.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name describing the Gantt table content.
+    //   caption — string, optional. Visible caption text displayed above the table.
+    //   children — Snippet, required. GanttTableHead, GanttTableBody, GanttTableTfoot elements.
+    //   ...restProps — additional HTML attributes spread onto the <table>.
+    //
+    // Syntax:
+    //   <GanttTable label="Project timeline">
+    //     <GanttTableHead>
+    //       <GanttTableTR>
+    //         <th>Task</th><th>Week 1</th><th>Week 2</th><th>Week 3</th>
+    //       </GanttTableTR>
+    //     </GanttTableHead>
+    //     <GanttTableBody>
+    //       <GanttTableTR>
+    //         <th>Design</th>
+    //         <GanttTableTD active>---</GanttTableTD>
+    //         <GanttTableTD />
+    //         <GanttTableTD />
+    //       </GanttTableTR>
+    //     </GanttTableBody>
+    //   </GanttTable>
+    //
+    // Keyboard:
+    //   None built-in — consumer should implement grid keyboard navigation
+    //   (arrow keys for cell movement, Enter/Space for selection).
+    //
+    // Accessibility:
+    //   - role="grid" identifies the table as an interactive grid widget
+    //   - aria-label provides an accessible name describing the Gantt table
+    //   - <caption> provides a visible accessible name when the caption prop is set
+    //
+    // Internationalization:
+    //   - The label and caption props provide all text; no hardcoded strings
+    //   - All content comes through the children snippet
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Compound component: use with GanttTableHead, GanttTableBody, GanttTableTfoot,
+    //     GanttTableTR, GanttTableTD, and GanttTableTH
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        caption = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible name describing the Gantt table content. */
+        label: string;
+        /** Visible caption for the table. */
+        caption?: string;
+        /** GanttTableHead, GanttTableBody, GanttTableTfoot elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTable.svelte -->
+<table
+    class={`gantt-table ${className}`}
+    role="grid"
+    aria-label={label}
+    {...restProps}
+>
+    {#if caption}
+        <caption>{caption}</caption>
+    {/if}
+    {@render children?.()}
+</table>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name describing the Gantt table content. */
+    label: string;
+    /** Visible caption for the table. */
+    caption?: string;
+    /** GanttTableHead, GanttTableBody, GanttTableTfoot elements. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const GanttTable: import("svelte").Component<$$ComponentProps, {}, "">;
+type GanttTable = ReturnType<typeof GanttTable>;
+export default GanttTable;

package/dist/components/GanttTableTD/GanttTableTD.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // GanttTableTD component
+    //
+    // A single cell within a GanttTableTR representing a time period in the
+    // Gantt table grid. Renders as a <td> with role="gridcell". Supports an
+    // active state to indicate the task spans this time period, communicated
+    // via aria-selected for screen readers.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   active — boolean, default false. Whether this cell represents an active time period for the task.
+    //   children — Snippet, optional. Cell content such as bar indicators or duration text.
+    //   ...restProps — additional HTML attributes spread onto the <td>.
+    //
+    // Syntax:
+    //   <GanttTableTD active>---</GanttTableTD>
+    //   <GanttTableTD />
+    //
+    // Examples:
+    //   <!-- Active time period with bar content -->
+    //   <GanttTableTD active>---</GanttTableTD>
+    //
+    //   <!-- Inactive empty time period -->
+    //   <GanttTableTD />
+    //
+    //   <!-- Active with milestone marker -->
+    //   <GanttTableTD active>◆</GanttTableTD>
+    //
+    // Keyboard:
+    //   None built-in — keyboard navigation is handled at the GanttTable grid level.
+    //
+    // Accessibility:
+    //   - role="gridcell" identifies the cell as part of a grid
+    //   - aria-selected set to true when active; omitted otherwise
+    //   - Roving tabindex: tabindex="0" when active, "-1" otherwise
+    //
+    // Internationalization:
+    //   - Cell content comes through children snippet; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a GanttTableTR (which provides the <tr>)
+    //   - Children are optional — empty cells represent inactive time periods
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        active = false,
+        children,
+        ...restProps
+    }: {
+        /** Whether this cell represents an active time period for the task. */
+        active?: boolean;
+        /** Cell content such as bar indicators or duration text. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTableTD.svelte -->
+<td
+    class={`gantt-table-td ${className}`}
+    role="gridcell"
+    aria-selected={active || undefined}
+    tabindex={active ? 0 : -1}
+    {...restProps}
+>
+    {#if children}
+        {@render children?.()}
+    {/if}
+</td>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether this cell represents an active time period for the task. */
+    active?: boolean;
+    /** Cell content such as bar indicators or duration text. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const GanttTableTD: import("svelte").Component<$$ComponentProps, {}, "">;
+type GanttTableTD = ReturnType<typeof GanttTableTD>;
+export default GanttTableTD;

package/dist/components/GanttTableTH/GanttTableTH.svelte

@@ -0,0 +1,69 @@
+<script lang="ts">
+    // GanttTableTH component
+    //
+    // A column header cell within a GanttTable, rendered as a <th> element.
+    // Used inside a <GanttTableTR> within <GanttTableHead> to label the time
+    // period columns of the Gantt grid (days, weeks, milestones, etc.).
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   colspan — number, optional. Number of columns this header cell spans.
+    //   rowspan — number, optional. Number of rows this header cell spans.
+    //   scope — "col" | "row" | "colgroup" | "rowgroup", default "col". Header scope.
+    //   children — Snippet, optional. Header cell content.
+    //   ...restProps — additional HTML attributes spread onto the <th>.
+    //
+    // Syntax:
+    //   <GanttTableHead>
+    //     <GanttTableTR>
+    //       <GanttTableTH>Week 1</GanttTableTH>
+    //       <GanttTableTH>Week 2</GanttTableTH>
+    //     </GanttTableTR>
+    //   </GanttTableHead>
+    //
+    // Keyboard:
+    //   None — <th> is not interactive.
+    //
+    // Accessibility:
+    //   - <th scope="col"> associates the header with its column for assistive tech
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a <tr> within a GanttTable
+    //   - All header text is provided by the consumer via children
+    //
+    // References:
+    //   - HTML th element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        colspan,
+        rowspan,
+        scope = "col",
+        children,
+        ...restProps
+    }: {
+        /** Number of columns this header cell spans. */
+        colspan?: number;
+        /** Number of rows this header cell spans. */
+        rowspan?: number;
+        /** Header scope. */
+        scope?: "col" | "row" | "colgroup" | "rowgroup";
+        /** Header cell content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTableTH.svelte -->
+<th
+    class={`gantt-table-th ${className}`}
+    {scope}
+    colspan={colspan || undefined}
+    rowspan={rowspan || undefined}
+    {...restProps}
+>
+    {#if children}{@render children?.()}{/if}
+</th>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Number of columns this header cell spans. */
+    colspan?: number;
+    /** Number of rows this header cell spans. */
+    rowspan?: number;
+    /** Header scope. */
+    scope?: "col" | "row" | "colgroup" | "rowgroup";
+    /** Header cell content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const GanttTableTH: import("svelte").Component<$$ComponentProps, {}, "">;
+type GanttTableTH = ReturnType<typeof GanttTableTH>;
+export default GanttTableTH;

package/dist/components/GanttTableTbody/GanttTableTbody.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    // GanttTableBody component
+    //
+    // The body section of a GanttTable, rendered as a <tbody> element.
+    // Contains GanttTableTR elements with task data cells.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. GanttTableTR elements with data cells.
+    //   ...restProps — additional HTML attributes spread onto the <tbody>.
+    //
+    // Syntax:
+    //   <GanttTableBody>
+    //     <GanttTableTR>
+    //       <GanttTableTD>Design</GanttTableTD>
+    //       <GanttTableTD>Jan 1</GanttTableTD>
+    //     </GanttTableTR>
+    //   </GanttTableBody>
+    //
+    // Keyboard:
+    //   None built-in — keyboard navigation handled at the GanttTable grid level.
+    //
+    // Accessibility:
+    //   - <tbody> provides structural body semantics for the table
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a GanttTable
+    //   - No internal state — purely a structural wrapper
+    //
+    // References:
+    //   - HTML tbody element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** GanttTableTR elements with task data cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTableBody.svelte -->
+<tbody
+    class={`gantt-table-tbody ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</tbody>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** GanttTableTR elements with task data cells. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const GanttTableTbody: import("svelte").Component<$$ComponentProps, {}, "">;
+type GanttTableTbody = ReturnType<typeof GanttTableTbody>;
+export default GanttTableTbody;