@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/SelectWithExtras/SelectWithExtras.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    // SelectWithExtras component
+    //
+    // A headless enhanced select that wraps a native <select> element with optional
+    // content areas before and after it. Allows consumers to place supplementary
+    // elements such as icons, flags, status indicators, or helper text alongside
+    // the select without breaking its accessibility. Preserves full native select
+    // behavior including keyboard navigation and form submission.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the select via aria-label.
+    //   value — string, default "". Currently selected value; bindable with bind:value.
+    //   required — boolean, default false. Whether the select is required for form validation.
+    //   disabled — boolean, default false. Whether the select is disabled.
+    //   children — Snippet, required. <option> elements for the select.
+    //   before — Snippet, optional. Content rendered before the select element.
+    //   after — Snippet, optional. Content rendered after the select element.
+    //   ...restProps — additional HTML attributes spread onto the wrapper <div>.
+    //
+    // Syntax:
+    //   <SelectWithExtras label="Country" bind:value>
+    //     <option value="us">USA</option>
+    //   </SelectWithExtras>
+    //
+    // Examples:
+    //   <!-- With before snippet for a flag icon -->
+    //   <SelectWithExtras label="Country" bind:value>
+    //     {#snippet before()}<span>Flag:</span>{/snippet}
+    //     <option value="us">USA</option>
+    //     <option value="uk">United Kingdom</option>
+    //   </SelectWithExtras>
+    //
+    //   <!-- With after snippet for a unit label -->
+    //   <SelectWithExtras label="Unit" bind:value={unit}>
+    //     {#snippet after()}<span>selected</span>{/snippet}
+    //     <option value="kg">Kilograms</option>
+    //     <option value="lb">Pounds</option>
+    //   </SelectWithExtras>
+    //
+    // Keyboard:
+    //   - Tab: moves focus to the native select element
+    //   - Arrow Up/Down: navigates between options (native select behavior)
+    //   - Space/Enter: opens the dropdown (native select behavior)
+    //   - Escape: closes the dropdown (native select behavior)
+    //
+    // Accessibility:
+    //   - aria-label on the <select> provides the accessible name
+    //   - Native <select> semantics are fully preserved
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible name for localization
+    //   - Before/after snippet content is consumer-provided for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Value uses $bindable() for two-way binding with bind:value
+    //   - restProps spread onto the wrapper <div>, not the <select>
+    //   - Before/after snippets are conditionally rendered only when provided
+    //
+    // References:
+    //   - HTML <select> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+    //   - WAI-ARIA Listbox Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        children,
+        before,
+        after,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Selected value. Bindable. */
+        value?: string;
+        /** Whether required. */
+        required?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        /** Option elements. */
+        children: Snippet;
+        /** Content before the select. */
+        before?: Snippet;
+        /** Content after the select. */
+        after?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SelectWithExtras.svelte -->
+<div
+    class={`select-with-extras ${className}`}
+    {...restProps}
+>
+    {#if before}
+        {@render before()}
+    {/if}
+    <select
+        aria-label={label}
+        bind:value
+        {required}
+        {disabled}
+    >
+        {@render children?.()}
+    </select>
+    {#if after}
+        {@render after()}
+    {/if}
+</div>

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

@@ -0,0 +1,21 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Selected value. Bindable. */
+    value?: string;
+    /** Whether required. */
+    required?: boolean;
+    /** Whether disabled. */
+    disabled?: boolean;
+    /** Option elements. */
+    children: Snippet;
+    /** Content before the select. */
+    before?: Snippet;
+    /** Content after the select. */
+    after?: Snippet;
+    [key: string]: unknown;
+};
+declare const SelectWithExtras: import("svelte").Component<$$ComponentProps, {}, "value">;
+type SelectWithExtras = ReturnType<typeof SelectWithExtras>;
+export default SelectWithExtras;

package/dist/components/Separator/Separator.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+    // Separator component
+    //
+    // A headless visual and semantic divider that renders an <hr> element with
+    // an explicit role="separator". Used between sections of a page, groups of
+    // menu items, or distinct areas of a form to organize content into logical
+    // groups and improve visual hierarchy.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, default undefined. Optional accessible label describing the separation.
+    //   ...restProps — additional HTML attributes spread onto the <hr>.
+    //
+    // Syntax:
+    //   <Separator />
+    //
+    // Examples:
+    //   <!-- Labeled separator between sections -->
+    //   <Separator label="End of introduction" />
+    //
+    //   <!-- With custom data attribute -->
+    //   <Separator label="Section break" data-section="divider" />
+    //
+    // Keyboard:
+    //   - None — the <hr> element is not focusable and does not receive keyboard input.
+    //
+    // Accessibility:
+    //   - role="separator" explicitly identifies the element as a section divider
+    //   - aria-label provides optional descriptive context for screen readers
+    //
+    // Internationalization:
+    //   - The optional label prop externalizes the separator description for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - The <hr> is a void element — no children or closing tag
+    //   - Label is optional; when undefined, aria-label is not rendered
+    //
+    // References:
+    //   - WAI-ARIA Separator Role: https://www.w3.org/TR/wai-aria-1.2/#separator
+    //   - MDN hr element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr
+
+    let {
+        class: className = "",
+        label = undefined,
+        ...restProps
+    }: {
+        /** Optional accessible label. */
+        label?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Separator.svelte -->
+<hr
+    class={`separator ${className}`}
+    role="separator"
+    aria-label={label}
+    {...restProps}
+/>

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

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

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

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

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

package/dist/components/Sheet/Sheet.svelte

@@ -0,0 +1,100 @@
+<script lang="ts">
+    // Sheet component
+    //
+    // A headless sliding panel overlay that appears from an edge of the viewport,
+    // functioning as a modal dialog. Conditionally rendered based on the open state,
+    // with Escape key to dismiss. Commonly used for navigation menus, settings panels,
+    // detail views, or filter interfaces that slide in from the top, right, bottom, or left.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the sheet dialog via aria-label.
+    //   open — boolean, default false. Whether the sheet is visible; bindable via bind:open.
+    //   side — "left" | "right" | "top" | "bottom", default "right". Which edge the sheet appears from.
+    //   children — Snippet, required. Content to render inside the sheet.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Sheet label="Settings" bind:open side="right">
+    //     <p>Sheet content</p>
+    //   </Sheet>
+    //
+    // Examples:
+    //   <!-- Left-side navigation sheet -->
+    //   <Sheet label="Navigation" bind:open={navOpen} side="left">
+    //     <nav><a href="/">Home</a></nav>
+    //   </Sheet>
+    //
+    //   <!-- Bottom sheet for mobile actions -->
+    //   <Sheet label="Actions" bind:open={actionsOpen} side="bottom">
+    //     <button>Share</button>
+    //     <button>Delete</button>
+    //   </Sheet>
+    //
+    // Keyboard:
+    //   - Escape: closes the sheet by setting open to false
+    //   - Tab: moves focus between focusable elements within the sheet
+    //
+    // Accessibility:
+    //   - role="dialog" identifies the sheet as a dialog window
+    //   - aria-label provides an accessible name for the dialog
+    //   - aria-modal="true" indicates the dialog is modal (content behind is inert)
+    //   - tabindex="-1" allows programmatic focus on the dialog container
+    //   - data-side attribute exposes the side for CSS targeting
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Open uses $bindable() for two-way binding with bind:open
+    //   - Consumer implements focus trapping and slide-in animations via CSS
+    //   - Completely removed from DOM when closed ({#if open})
+    //
+    // References:
+    //   - WAI-ARIA Dialog (Modal) Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        open = $bindable(false),
+        side = "right",
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Whether the sheet is open. Bindable. */
+        open?: boolean;
+        /** Edge from which the sheet appears. */
+        side?: "left" | "right" | "top" | "bottom";
+        /** Sheet content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    function onkeydown(event: KeyboardEvent) {
+        if (event.key === "Escape") {
+            event.preventDefault();
+            open = false;
+        }
+    }
+</script>
+
+<!-- Sheet.svelte -->
+{#if open}
+    <div
+        class={`sheet ${className}`}
+        role="dialog"
+        aria-label={label}
+        aria-modal="true"
+        tabindex="-1"
+        data-side={side}
+        {onkeydown}
+        {...restProps}
+    >
+        {@render children?.()}
+    </div>
+{/if}

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

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

package/dist/components/Sidebar/Sidebar.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    // Sidebar component
+    //
+    // A headless complementary region that uses the semantic <aside> element to
+    // provide a labeled landmark for content tangentially related to the main
+    // content. Commonly used for navigation menus, filters, related links, or
+    // supplementary information alongside the primary page content.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the sidebar region via aria-label.
+    //   children — Snippet, required. Content to render inside the sidebar.
+    //   ...restProps — additional HTML attributes spread onto the <aside>.
+    //
+    // Syntax:
+    //   <Sidebar label="Navigation">
+    //     <nav>...</nav>
+    //   </Sidebar>
+    //
+    // Examples:
+    //   <!-- Sidebar with filter controls -->
+    //   <Sidebar label="Filters">
+    //     <form>
+    //       <select><option>Category</option></select>
+    //     </form>
+    //   </Sidebar>
+    //
+    //   <!-- Sidebar with related links -->
+    //   <Sidebar label="Related articles">
+    //     <ul><li><a href="/article-1">Article 1</a></li></ul>
+    //   </Sidebar>
+    //
+    // Keyboard:
+    //   - None — this is a passive container. Keyboard navigation depends on interactive content inside.
+    //
+    // Accessibility:
+    //   - <aside> element has implicit complementary landmark role
+    //   - aria-label distinguishes this sidebar from other landmarks on the page
+    //   - Screen readers announce it as a complementary landmark
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No internal state management — purely structural component
+    //   - Layout, width, positioning are entirely the consumer's responsibility
+    //
+    // References:
+    //   - WAI-ARIA Complementary Role: https://www.w3.org/TR/wai-aria-1.2/#complementary
+    //   - WAI-ARIA Landmark Regions: https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/
+    //   - HTML <aside> element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Sidebar content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Sidebar.svelte -->
+<aside
+    class={`sidebar ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</aside>

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

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

package/dist/components/SignaturePad/SignaturePad.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    // SignaturePad component
+    //
+    // A headless container for capturing handwritten signatures using mouse, touch,
+    // or stylus input. Renders a <div> with role="application" and an accessible
+    // label. Commonly used in contract signing workflows, consent forms, delivery
+    // confirmations, and legal document processing. The consumer provides the actual
+    // drawing implementation (HTML canvas, SVG paths, or a third-party library).
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible description of the signature field via aria-label.
+    //   children — Snippet, required. Drawing surface (canvas, SVG, or other input mechanism).
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <SignaturePad label="Sign here">
+    //     <canvas width="400" height="200"></canvas>
+    //   </SignaturePad>
+    //
+    // Examples:
+    //   <!-- With terms acceptance context -->
+    //   <SignaturePad label="Sign to accept terms">
+    //     <canvas width="400" height="200"></canvas>
+    //   </SignaturePad>
+    //
+    //   <!-- With SVG drawing surface -->
+    //   <SignaturePad label="Your signature">
+    //     <svg viewBox="0 0 400 200"><path d="" /></svg>
+    //   </SignaturePad>
+    //
+    // Keyboard:
+    //   - None — pointer-based interactions are handled by the consumer-provided drawing surface.
+    //
+    // Accessibility:
+    //   - role="application" indicates a complex widget with custom pointer interactions
+    //   - aria-label provides an accessible description of the signature pad purpose
+    //   - Assistive technologies pass keyboard events through to the application
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible description for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No internal drawing logic — consumer provides canvas/SVG implementation
+    //   - role="application" is intentional for complex pointer interaction widgets
+    //
+    // References:
+    //   - WAI-ARIA application role: https://www.w3.org/TR/wai-aria-1.2/#application
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: { label: string; children: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<!-- SignaturePad.svelte -->
+<div
+    class={`signature-pad ${className}`}
+    role="application"
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    // Skeleton component
+    //
+    // A headless loading placeholder that indicates content is in the process of
+    // loading. Shows the approximate layout of content before it arrives, reducing
+    // perceived loading time and preventing layout shift. Hidden from screen readers
+    // with aria-hidden="true" and signals loading state with aria-busy="true".
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, optional. Placeholder content such as skeleton line shapes.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Skeleton />
+    //
+    // Examples:
+    //   <!-- With placeholder shapes -->
+    //   <Skeleton>
+    //     <div class="skeleton-line"></div>
+    //     <div class="skeleton-line"></div>
+    //   </Skeleton>
+    //
+    //   <!-- With sizing attributes -->
+    //   <Skeleton style="width:200px; height:20px;" />
+    //
+    // Keyboard:
+    //   - None — this is a passive placeholder hidden from interaction.
+    //
+    // Accessibility:
+    //   - aria-hidden="true" hides the placeholder entirely from screen readers
+    //   - aria-busy="true" signals that this region is in a loading state
+    //   - Content will be replaced when loading completes
+    //
+    // Internationalization:
+    //   - No user-facing text — purely a visual placeholder
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Children are optional — renders an empty div when no shapes are provided
+    //   - Consumer applies skeleton animation and sizing via CSS
+    //
+    // References:
+    //   - WAI-ARIA aria-busy: https://www.w3.org/WAI/ARIA/apd/states/aria-busy/
+    //   - MDN aria-hidden: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-hidden
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** Optional placeholder content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Skeleton.svelte -->
+<div
+    class={`skeleton ${className}`}
+    aria-hidden="true"
+    aria-busy="true"
+    {...restProps}
+>
+    {#if children}
+        {@render children?.()}
+    {/if}
+</div>

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

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