@lilydesignsystem/svelte-headless 0.1.0

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    src: string;
+    label: string;
+    alt: string;
+    offset?: number;
+    onIndexChange?: (index: number) => void;
+    onProgressChange?: (progress: number) => void;
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ScrollerVideo: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScrollerVideo = ReturnType<typeof ScrollerVideo>;
+export default ScrollerVideo;

package/dist/components/SearchInput/SearchInput.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+    // SearchInput component
+    //
+    // A headless search field using the native HTML <input type="search"> element.
+    // Provides semantic search meaning and may trigger browser-specific behaviors
+    // such as a clear button, search icon, or search-optimized mobile keyboard.
+    // Commonly used for site-wide search bars, filtering lists, and query entry.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   value — string, default "". Current search text; bindable with bind:value.
+    //   required — boolean, default false. Whether the field must be filled before form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <SearchInput label="Search" bind:value />
+    //
+    // Examples:
+    //   <!-- Required search with binding -->
+    //   <SearchInput label="Filter products" bind:value={query} required />
+    //
+    //   <!-- With placeholder and name -->
+    //   <SearchInput label="Search articles" bind:value placeholder="Type to search..." name="q" />
+    //
+    // Keyboard:
+    //   - Escape: clears the search field (browser-native behavior for search inputs)
+    //   - Enter: submits the containing form (standard input behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name since there is no visible <label> element
+    //   - Native <input type="search"> has implicit search semantics
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible name for localization
+    //   - Placeholder text should be provided via restProps for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Value uses $bindable() for two-way binding with bind:value
+    //   - No visible <label> element — relies on aria-label
+    //
+    // References:
+    //   - MDN input type="search": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/search
+    //   - WAI-ARIA Search Role: https://www.w3.org/WAI/ARIA/apg/patterns/search/
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Current value. Bindable. */
+        value?: string;
+        /** Whether required. */
+        required?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SearchInput.svelte -->
+<input
+    class={`search-input ${className}`}
+    type="search"
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/SectionHeading/SectionHeading.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // SectionHeading component
+    //
+    // A styled heading introducing a major content section, with optional
+    // eyebrow and subtitle. Renders a native <header> containing an optional
+    // eyebrow paragraph, a heading at level 2-6, and an optional subtitle
+    // paragraph.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   heading — string, REQUIRED. Main heading text.
+    //   eyebrow — string, optional. Eyebrow text rendered above the heading.
+    //   subtitle — string, optional. Subtitle text below the heading.
+    //   level — 2 | 3 | 4 | 5 | 6, default 2. Heading level.
+    //   ...restProps — additional HTML attributes spread onto the <header>.
+    //
+    // Syntax:
+    //   <SectionHeading eyebrow="Updates" heading="Latest news" subtitle="What we shipped this week" level={2} />
+    //
+    // Accessibility:
+    //   - <header> semantics
+    //   - Heading element provides hierarchical semantics
+    //
+    // Internationalization:
+    //   - All text via props
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - heading is REQUIRED — TypeScript reflects this
+
+    let {
+        class: className = "",
+        heading,
+        eyebrow = undefined,
+        subtitle = undefined,
+        level = 2,
+        ...restProps
+    }: {
+        /** Consumer CSS class appended to base class */
+        class?: string;
+        /** Main heading text (REQUIRED) */
+        heading: string;
+        /** Eyebrow text rendered above the heading */
+        eyebrow?: string;
+        /** Subtitle text below the heading */
+        subtitle?: string;
+        /** Heading level */
+        level?: 2 | 3 | 4 | 5 | 6;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SectionHeading.svelte -->
+<header
+    class={`section-heading ${className}`}
+    {...restProps}
+>
+    {#if eyebrow}
+        <p class="section-heading-eyebrow">{eyebrow}</p>
+    {/if}
+    {#if level === 2}
+        <h2 class="section-heading-heading">{heading}</h2>
+    {:else if level === 3}
+        <h3 class="section-heading-heading">{heading}</h3>
+    {:else if level === 4}
+        <h4 class="section-heading-heading">{heading}</h4>
+    {:else if level === 5}
+        <h5 class="section-heading-heading">{heading}</h5>
+    {:else}
+        <h6 class="section-heading-heading">{heading}</h6>
+    {/if}
+    {#if subtitle}
+        <p class="section-heading-subtitle">{subtitle}</p>
+    {/if}
+</header>

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

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** Consumer CSS class appended to base class */
+    class?: string;
+    /** Main heading text (REQUIRED) */
+    heading: string;
+    /** Eyebrow text rendered above the heading */
+    eyebrow?: string;
+    /** Subtitle text below the heading */
+    subtitle?: string;
+    /** Heading level */
+    level?: 2 | 3 | 4 | 5 | 6;
+    [key: string]: unknown;
+};
+declare const SectionHeading: import("svelte").Component<$$ComponentProps, {}, "">;
+type SectionHeading = ReturnType<typeof SectionHeading>;
+export default SectionHeading;

package/dist/components/SectionLink/SectionLink.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        href = "#top",
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        href?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SectionLink.svelte -->
+<a
+    class={`section-link ${className}`}
+
+
+    {href}
+    {...restProps}
+>
+    {@render children?.()}
+</a>

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

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

package/dist/components/SectionList/SectionList.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>
+
+<!-- SectionList.svelte -->
+<ul
+    class={`section-list ${className}`}
+
+
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

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

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

package/dist/components/SectionListItem/SectionListItem.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        current = false,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        current?: boolean;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SectionListItem.svelte -->
+<li
+    class={`section-list-item ${className}`}
+
+
+    aria-current={current ? "page" : undefined}
+    {...restProps}
+>
+    {@render children?.()}
+</li>

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

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

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

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

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

package/dist/components/SegmentGroup/SegmentGroup.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // SegmentGroup component
+    //
+    // A headless segmented control group that uses the ARIA radiogroup role to
+    // contain a set of mutually exclusive options. Renders a <div> with
+    // role="radiogroup" and expects children to be SegmentGroupItem buttons
+    // (or buttons with role="radio" and aria-checked). Used for view mode toggles,
+    // filter selections, display density controls, and similar single-select UIs.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the segment group via aria-label.
+    //   children — Snippet, required. Segment button elements to render inside the group.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <SegmentGroup label="View">
+    //     <button role="radio" aria-checked="true">Grid</button>
+    //     <button role="radio" aria-checked="false">List</button>
+    //   </SegmentGroup>
+    //
+    // Examples:
+    //   <!-- With SegmentGroupItem children -->
+    //   <SegmentGroup label="Display mode">
+    //     <SegmentGroupItem checked={mode === 'grid'} value="grid">Grid</SegmentGroupItem>
+    //     <SegmentGroupItem checked={mode === 'list'} value="list">List</SegmentGroupItem>
+    //   </SegmentGroup>
+    //
+    // Keyboard:
+    //   - Tab: moves focus into the segment group
+    //   - Arrow Left/Right: consumer should implement navigation between segments
+    //   - Space/Enter: consumer should implement activation of the focused segment
+    //
+    // Accessibility:
+    //   - role="radiogroup" identifies the container as mutually exclusive radio-like options
+    //   - aria-label provides an accessible name for the group
+    //   - Children should use role="radio" and aria-checked attributes
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer manages selection state (toggling aria-checked on children)
+    //   - Compound component: use with SegmentGroupItem
+    //
+    // References:
+    //   - WAI-ARIA Radio Group Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Segment elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SegmentGroup.svelte -->
+<div
+    class={`segment-group ${className}`}
+    role="radiogroup"
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/SegmentGroupItem/SegmentGroupItem.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+    // SegmentGroupItem component
+    //
+    // A single segment option within a SegmentGroup (role="radiogroup"). Renders
+    // as a <button> with role="radio" and aria-checked to indicate selection state.
+    // Uses roving tabindex so only the checked item receives tab focus. Used inside
+    // SegmentGroup to build custom segmented controls like view mode toggles.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   checked — boolean, default false. Whether this segment is currently selected.
+    //   value — string, default "". Value associated with this segment, exposed as data-value.
+    //   disabled — boolean, default false. Whether the segment is disabled.
+    //   children — Snippet, required. Label content to render inside the button.
+    //   ...restProps — additional HTML attributes spread onto the <button>.
+    //
+    // Syntax:
+    //   <SegmentGroupItem checked={true} value="grid">Grid</SegmentGroupItem>
+    //
+    // Examples:
+    //   <!-- Inside a SegmentGroup with click handlers -->
+    //   <SegmentGroup label="View">
+    //     <SegmentGroupItem checked={mode === 'grid'} value="grid" onclick={() => mode = 'grid'}>Grid</SegmentGroupItem>
+    //     <SegmentGroupItem checked={mode === 'list'} value="list" onclick={() => mode = 'list'}>List</SegmentGroupItem>
+    //   </SegmentGroup>
+    //
+    // Keyboard:
+    //   - Tab: focus moves to the checked segment (roving tabindex)
+    //   - Space/Enter: activates the focused segment (native button behavior)
+    //   - Arrow Left/Right: consumer should implement on the parent SegmentGroup
+    //
+    // Accessibility:
+    //   - role="radio" identifies this button as a radio-like option within a radiogroup
+    //   - aria-checked indicates whether this segment is selected (true/false)
+    //   - Roving tabindex: checked item has tabindex="0", others have tabindex="-1"
+    //   - data-value exposes the segment value for CSS or JS queries
+    //
+    // Internationalization:
+    //   - Label content comes through the children snippet for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Compound component: must be used inside a SegmentGroup
+    //   - Consumer manages selection state and click/keyboard handlers
+    //
+    // References:
+    //   - WAI-ARIA Radio Group Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/radio/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        checked = false,
+        value = "",
+        disabled = false,
+        children,
+        ...restProps
+    }: {
+        /** Whether this segment is selected. */
+        checked?: boolean;
+        /** Value associated with this segment. */
+        value?: string;
+        /** Whether this segment is disabled. */
+        disabled?: boolean;
+        /** Label content for the segment. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SegmentGroupItem.svelte -->
+<button
+    class={`segment-group-item ${className}`}
+    role="radio"
+    aria-checked={checked}
+    data-value={value}
+    tabindex={checked ? 0 : -1}
+    {disabled}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether this segment is selected. */
+    checked?: boolean;
+    /** Value associated with this segment. */
+    value?: string;
+    /** Whether this segment is disabled. */
+    disabled?: boolean;
+    /** Label content for the segment. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const SegmentGroupItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type SegmentGroupItem = ReturnType<typeof SegmentGroupItem>;
+export default SegmentGroupItem;

package/dist/components/Select/Select.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    // Select component
+    //
+    // A headless wrapper around the native HTML <select> element for choosing one
+    // option from a dropdown list. The consumer provides <option> elements as
+    // children, giving full control over available choices. Commonly used in forms
+    // for selecting countries, categories, statuses, or other predefined values.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   value — string, default "". Currently selected value; bindable with bind:value.
+    //   required — boolean, default false. Whether the select is required for form submission.
+    //   disabled — boolean, default false. Whether the select is disabled.
+    //   children — Snippet, required. <option> elements to render inside the select.
+    //   ...restProps — additional HTML attributes spread onto the <select>.
+    //
+    // Syntax:
+    //   <Select label="Country" bind:value>
+    //     <option value="us">United States</option>
+    //   </Select>
+    //
+    // Examples:
+    //   <!-- Required select with placeholder -->
+    //   <Select label="Priority" bind:value={priority} required>
+    //     <option value="">Select priority...</option>
+    //     <option value="low">Low</option>
+    //     <option value="high">High</option>
+    //   </Select>
+    //
+    //   <!-- Disabled select -->
+    //   <Select label="Status" bind:value disabled={isReadOnly}>
+    //     <option value="active">Active</option>
+    //     <option value="inactive">Inactive</option>
+    //   </Select>
+    //
+    // Keyboard:
+    //   - Tab: moves focus to/from the select (native browser behavior)
+    //   - Space/Enter: opens the dropdown list (native browser behavior)
+    //   - Arrow Up/Down: navigates through options (native browser behavior)
+    //   - Escape: closes the dropdown list (native browser behavior)
+    //   - Home/End: jumps to first/last option (native browser behavior)
+    //   - Type-ahead: typing characters jumps to matching options (native browser behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name since there is no visible <label> element
+    //   - Native <select> has implicit combobox/listbox role with built-in semantics
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible name for localization
+    //   - Option text is provided by the consumer via children snippet
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Value uses $bindable() for two-way binding with bind:value
+    //   - Children snippet renders <option> elements inside the native <select>
+    //
+    // References:
+    //   - MDN select element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Current selected value. Bindable. */
+        value?: string;
+        /** Whether required. */
+        required?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        /** Option elements to render inside. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Select.svelte -->
+<select
+    class={`select ${className}`}
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+>
+    {@render children?.()}
+</select>

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

@@ -0,0 +1,17 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Current selected value. Bindable. */
+    value?: string;
+    /** Whether required. */
+    required?: boolean;
+    /** Whether disabled. */
+    disabled?: boolean;
+    /** Option elements to render inside. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;