@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/Alert/Alert.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+    // Alert component
+    //
+    // A headless alert for displaying important messages to the user, such as
+    // warnings, errors, confirmations, or status updates. Renders a <div> with
+    // ARIA live region attributes so screen readers announce content automatically.
+    //
+    // Supports severity types (info, success, warning, error) exposed via a
+    // data-type attribute for consumer CSS styling. An optional heading is
+    // rendered with <strong> emphasis without assuming a heading level.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   type     — "info" | "success" | "warning" | "error", default "info".
+    //              Severity type exposed as data-type attribute.
+    //   heading  — string, optional. Heading text rendered as <p><strong>.
+    //   role     — "alert" | "status", default "alert". ARIA role:
+    //              "alert" for assertive (immediate), "status" for polite.
+    //   live     — "assertive" | "polite" | "off", optional. Overrides the
+    //              default aria-live value derived from the role.
+    //   children — Snippet, required. The alert content.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Alert>Message</Alert>
+    //   <Alert type="error" heading="Error">Details here.</Alert>
+    //
+    // Examples:
+    //   <!-- Simple info alert (default) -->
+    //   <Alert>Something happened.</Alert>
+    //
+    //   <!-- Error alert with heading -->
+    //   <Alert type="error" heading="Error">Something went wrong.</Alert>
+    //
+    //   <!-- Success notification -->
+    //   <Alert type="success" heading="Saved">Your changes were saved.</Alert>
+    //
+    //   <!-- Polite status message -->
+    //   <Alert role="status">Loading complete.</Alert>
+    //
+    //   <!-- Warning with custom attributes -->
+    //   <Alert type="warning" data-testid="warn-alert">Check your input.</Alert>
+    //
+    // Keyboard: None — alerts are passive announcements, not interactive.
+    //
+    // Accessibility:
+    //   - role="alert" with aria-live="assertive" for immediate announcements
+    //   - role="status" with aria-live="polite" for less urgent messages
+    //   - aria-atomic="true" ensures the entire region is re-read on change
+    //   - data-type exposes severity for consumer styling (not for assistive tech)
+    //
+    // Internationalization:
+    //   - All text comes through children snippet and heading prop
+    //   - No hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Do not use heading elements (h1-h6); use <p><strong> for the heading
+    //   - The live prop overrides the default; omit it to use role-based defaults
+    //   - data-type is for styling hooks, not semantics
+    //
+    // References:
+    //   - WAI-ARIA Alert Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alert/
+    //   - WAI-ARIA alert role: https://www.w3.org/TR/wai-aria-1.2/#alert
+    //   - WAI-ARIA status role: https://www.w3.org/TR/wai-aria-1.2/#status
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        type = "info",
+        heading = undefined,
+        role = "alert",
+        live = undefined,
+        children,
+        ...restProps
+    }: {
+        /** The alert severity type */
+        type?: "info" | "success" | "warning" | "error";
+        /** Optional heading text for the alert */
+        heading?: string;
+        /** ARIA role: "alert" for assertive, "status" for polite */
+        role?: "alert" | "status";
+        /** ARIA live region politeness override */
+        live?: "assertive" | "polite" | "off";
+        /** The alert content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    // Default aria-live based on role if not explicitly set
+    let ariaLive = $derived(
+        live ?? (role === "alert" ? "assertive" : "polite"),
+    );
+</script>
+
+<!-- Alert.svelte -->
+<div
+    class={`alert ${className}`}
+    {role}
+    aria-live={ariaLive}
+    aria-atomic="true"
+    data-type={type}
+    {...restProps}
+>
+    {#if heading}
+        <p><strong>{heading}</strong></p>
+    {/if}
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The alert severity type */
+    type?: "info" | "success" | "warning" | "error";
+    /** Optional heading text for the alert */
+    heading?: string;
+    /** ARIA role: "alert" for assertive, "status" for polite */
+    role?: "alert" | "status";
+    /** ARIA live region politeness override */
+    live?: "assertive" | "polite" | "off";
+    /** The alert content */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/AlertDialog/AlertDialog.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    // AlertDialog component
+    //
+    // A headless modal alert dialog for critical interactions that require user
+    // acknowledgment before continuing. Uses the native HTML <dialog> element
+    // with the ARIA alertdialog role. Distinguished from regular Dialog by the
+    // alertdialog role, which signals to assistive technologies that the content
+    // requires immediate attention.
+    //
+    // Common uses: confirming irreversible actions ("Delete this item?"),
+    // warning about unsaved changes, or displaying critical error messages.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   open        — boolean, default false, bindable. Whether the dialog is visible.
+    //   title       — string, required. Dialog heading, referenced by aria-labelledby.
+    //   description — string, optional. Dialog message, referenced by aria-describedby.
+    //   children    — Snippet, required. Action buttons and additional content.
+    //   ...restProps — additional HTML attributes spread onto <dialog>.
+    //
+    // Syntax:
+    //   <AlertDialog bind:open title="Confirm" description="Are you sure?">
+    //     <button>Yes</button>
+    //     <button>No</button>
+    //   </AlertDialog>
+    //
+    // Examples:
+    //   <!-- Confirmation dialog with description -->
+    //   <AlertDialog bind:open={showDialog} title="Confirm Deletion"
+    //     description="This action cannot be undone.">
+    //     <button onclick={handleConfirm}>Yes, delete</button>
+    //     <button onclick={handleCancel}>Cancel</button>
+    //   </AlertDialog>
+    //
+    //   <!-- Simple acknowledgment dialog -->
+    //   <AlertDialog bind:open={showAlert} title="Session Expired">
+    //     <button onclick={() => showAlert = false}>OK</button>
+    //   </AlertDialog>
+    //
+    // Keyboard:
+    //   - Escape: Consumer must implement via onkeydown to close the dialog
+    //   - Tab: Consumer should implement focus trapping within the dialog
+    //
+    // Accessibility:
+    //   - role="alertdialog" signals critical content requiring acknowledgment
+    //   - aria-modal="true" indicates modal behavior to assistive technologies
+    //   - aria-labelledby references the title element
+    //   - aria-describedby references the description element (when present)
+    //   - Conditionally rendered with {#if open} to remove from DOM when closed
+    //
+    // Internationalization:
+    //   - Title and description come through props
+    //   - Action buttons come through children snippet
+    //   - No hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer is responsible for focus trapping and Escape key handling
+    //   - The open prop must use $bindable() for two-way binding
+    //   - Do not use heading elements; use <p><strong> for the title
+    //   - Distinct from Dialog: use AlertDialog only for critical messages
+    //
+    // References:
+    //   - WAI-ARIA alertdialog role: https://www.w3.org/TR/wai-aria-1.2/#alertdialog
+    //   - WAI-ARIA Alert and Message Dialogs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        open = $bindable(false),
+        title,
+        description = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Whether the dialog is visible */
+        open?: boolean;
+        /** The dialog title for the heading and aria-labelledby */
+        title: string;
+        /** The dialog description/message for aria-describedby */
+        description?: string;
+        /** The dialog action buttons and content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    // Generate unique IDs for ARIA references so multiple instances don't collide
+    let uid = $props.id();
+    let titleId = `alert-dialog-title-${uid}`;
+    let descriptionId = `alert-dialog-description-${uid}`;
+</script>
+
+<!-- AlertDialog.svelte -->
+{#if open}
+    <dialog
+        class={`alert-dialog ${className}`}
+        open
+        role="alertdialog"
+        aria-labelledby={titleId}
+        aria-describedby={description ? descriptionId : undefined}
+        aria-modal="true"
+        {...restProps}
+    >
+        <div>
+            <p id={titleId}><strong>{title}</strong></p>
+            {#if description}
+                <p id={descriptionId}>{description}</p>
+            {/if}
+            {@render children?.()}
+        </div>
+    </dialog>
+{/if}

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether the dialog is visible */
+    open?: boolean;
+    /** The dialog title for the heading and aria-labelledby */
+    title: string;
+    /** The dialog description/message for aria-describedby */
+    description?: string;
+    /** The dialog action buttons and content */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const AlertDialog: import("svelte").Component<$$ComponentProps, {}, "open">;
+type AlertDialog = ReturnType<typeof AlertDialog>;
+export default AlertDialog;

package/dist/components/AngleSliderRangeInput/AngleSliderRangeInput.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    // AngleSliderRangeInput component
+    //
+    // A headless slider for selecting an angle value (0–360 degrees). Built on
+    // the native <input type="range"> with full ARIA slider semantics. Useful
+    // for rotation controls, compass direction pickers, hue angle selectors,
+    // or any circular/angular value input.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   value           — number, default 0, bindable. Current angle in degrees.
+    //   min             — number, default 0. Minimum angle.
+    //   max             — number, default 360. Maximum angle.
+    //   step            — number, default 1. Step increment.
+    //   label           — string, required. Accessible label for the slider.
+    //   disabled        — boolean, default false. Whether the slider is disabled.
+    //   name            — string, optional. Form field name for submission.
+    //   id              — string, optional. Element ID.
+    //   valueTextSuffix — string, default "°". Suffix for aria-valuetext
+    //                     (e.g., "°" makes "90°" for screen readers).
+    //   ...restProps    — additional HTML attributes spread onto <input>.
+    //
+    // Syntax:
+    //   <AngleSliderRangeInput label="Rotation" bind:value={angle} />
+    //
+    // Examples:
+    //   <!-- Basic angle slider -->
+    //   <AngleSliderRangeInput label="Rotation" bind:value={angle} />
+    //
+    //   <!-- Stepped compass direction -->
+    //   <AngleSliderRangeInput label="Direction" value={90} step={15} />
+    //
+    //   <!-- Custom range with suffix -->
+    //   <AngleSliderRangeInput label="Hue" min={0} max={360}
+    //     valueTextSuffix=" degrees" bind:value={hue} />
+    //
+    //   <!-- Disabled slider -->
+    //   <AngleSliderRangeInput label="Locked angle" value={45} disabled />
+    //
+    // Keyboard:
+    //   - Arrow Right / Arrow Up: Increase value by step
+    //   - Arrow Left / Arrow Down: Decrease value by step
+    //   - Home: Set to min value
+    //   - End: Set to max value
+    //   (All provided by native <input type="range"> behavior.)
+    //
+    // Accessibility:
+    //   - Implicit slider role from <input type="range">
+    //   - aria-label provides accessible name
+    //   - aria-valuemin, aria-valuemax, aria-valuenow for range semantics
+    //   - aria-valuetext provides human-readable value (e.g., "90°")
+    //
+    // Internationalization:
+    //   - Label text comes through the label prop
+    //   - Value text suffix (e.g., "°" or " degrees") via valueTextSuffix prop
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Use native <input type="range">, not custom slider markup
+    //   - The value prop must use $bindable() for two-way binding
+    //   - aria-valuetext is derived from value + valueTextSuffix
+    //
+    // References:
+    //   - WAI-ARIA Slider Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/slider/
+
+    let {
+        class: className = "",
+        value = $bindable(0),
+        min = 0,
+        max = 360,
+        step = 1,
+        label,
+        disabled = false,
+        name = undefined,
+        id = undefined,
+        valueTextSuffix = "°",
+        ...restProps
+    }: {
+        /** Current angle in degrees */
+        value?: number;
+        /** Minimum angle */
+        min?: number;
+        /** Maximum angle */
+        max?: number;
+        /** Step increment */
+        step?: number;
+        /** Accessible label for the slider */
+        label: string;
+        /** Whether the slider is disabled */
+        disabled?: boolean;
+        /** Form field name */
+        name?: string;
+        /** Element ID */
+        id?: string;
+        /** Suffix for the value text (default: "°") */
+        valueTextSuffix?: string;
+        [key: string]: unknown;
+    } = $props();
+
+    // Formatted value text for screen readers (e.g., "90°")
+    let valueText = $derived(`${value}${valueTextSuffix}`);
+</script>
+
+<!-- AngleSliderRangeInput.svelte -->
+<input
+    class={`angle-slider-range-input ${className}`}
+    type="range"
+    bind:value
+    {min}
+    {max}
+    {step}
+    {disabled}
+    {name}
+    {id}
+    aria-label={label}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    aria-valuetext={valueText}
+    {...restProps}
+/>

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

@@ -0,0 +1,24 @@
+type $$ComponentProps = {
+    /** Current angle in degrees */
+    value?: number;
+    /** Minimum angle */
+    min?: number;
+    /** Maximum angle */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Accessible label for the slider */
+    label: string;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Form field name */
+    name?: string;
+    /** Element ID */
+    id?: string;
+    /** Suffix for the value text (default: "°") */
+    valueTextSuffix?: string;
+    [key: string]: unknown;
+};
+declare const AngleSliderRangeInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type AngleSliderRangeInput = ReturnType<typeof AngleSliderRangeInput>;
+export default AngleSliderRangeInput;

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

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

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

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

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

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

package/dist/components/AreaChart/AreaChart.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>
+
+<!-- AreaChart.svelte -->
+<figure
+    class={`area-chart ${className}`}
+    role="img"
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</figure>

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

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

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

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

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

package/dist/components/AspectRatioContainer/AspectRatioContainer.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    // AspectRatioContainer component
+    //
+    // A headless layout container that maintains a specific width-to-height
+    // aspect ratio for its content. Sets CSS aspect-ratio-container via a style attribute
+    // and exposes a data-aspect-ratio-container attribute for consumer styling hooks.
+    // Useful for responsive images, videos, cards, and any content that must
+    // maintain consistent proportions across screen sizes.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   ratio    — number, default 1. Aspect ratio as width/height.
+    //              Common values: 16/9, 4/3, 1 (square), 21/9 (ultrawide).
+    //   children — Snippet, required. Content to display inside the container.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <AspectRatioContainer ratio={16/9}>content</AspectRatioContainer>
+    //
+    // Examples:
+    //   <!-- 16:9 video container -->
+    //   <AspectRatioContainer ratio={16/9}>
+    //     <video src="video.mp4"></video>
+    //   </AspectRatioContainer>
+    //
+    //   <!-- Square avatar frame -->
+    //   <AspectRatioContainer ratio={1}>
+    //     <img src="avatar.jpg" alt="User avatar" />
+    //   </AspectRatioContainer>
+    //
+    //   <!-- 4:3 card layout -->
+    //   <AspectRatioContainer ratio={4/3} data-testid="card-frame">
+    //     <p>Card content</p>
+    //   </AspectRatioContainer>
+    //
+    // Keyboard: None — this is a layout utility, not an interactive element.
+    //
+    // Accessibility:
+    //   - No specific ARIA role needed; this is a layout utility
+    //   - Content within maintains its own accessibility semantics
+    //   - data-aspect-ratio-container attribute exposed for consumer CSS queries
+    //
+    // Internationalization:
+    //   - No user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles beyond the inline aspect-ratio-container
+    //   - Uses CSS aspect-ratio-container property (not padding-bottom hack)
+    //   - Do not add overflow: hidden — consumer handles clipping
+    //
+    // References:
+    //   - CSS aspect-ratio-container: https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio-container
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        ratio = 1,
+        children,
+        ...restProps
+    }: {
+        /** The aspect ratio as a number (width / height), e.g. 16/9 */
+        ratio?: number;
+        /** The content to display within the aspect ratio container */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- AspectRatioContainer.svelte -->
+<div
+    class={`aspect-ratio-container ${className}`}
+    style:aspect-ratio={ratio}
+    data-aspect-ratio-container={ratio}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** The aspect ratio as a number (width / height), e.g. 16/9 */
+    ratio?: number;
+    /** The content to display within the aspect ratio container */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const AspectRatioContainer: import("svelte").Component<$$ComponentProps, {}, "">;
+type AspectRatioContainer = ReturnType<typeof AspectRatioContainer>;
+export default AspectRatioContainer;