@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/TelInput/TelInput.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // TelInput component
+    //
+    // A headless telephone input using the native HTML <input type="tel"> element.
+    // Provides accessible labeling via aria-label and browser autofill support via
+    // autocomplete="tel". Commonly used in contact forms, registration flows, and
+    // profile editors. Supports two-way data binding through a bindable value prop.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the input via aria-label.
+    //   value — string, default "". Bindable telephone number value.
+    //   required — boolean, default false. Whether the field is required for form submission.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <TelInput label="Phone number" bind:value />
+    //
+    // Examples:
+    //   <!-- Required phone input -->
+    //   <TelInput label="Mobile" bind:value required />
+    //
+    // Keyboard:
+    //   - Native <input type="tel"> keyboard behavior (Tab to focus, type to enter digits)
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for the input
+    //   - autocomplete="tel" enables browser and password manager autofill
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Uses $bindable() for two-way data binding on value
+    //   - Consumer can add placeholder, pattern, maxlength via restProps
+    //
+    // References:
+    //   - HTML tel input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible name for the telephone input */
+        label: string;
+        /** Bindable telephone number value */
+        value?: string;
+        /** Whether the input is required */
+        required?: boolean;
+        /** Whether the input is disabled */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TelInput.svelte -->
+<input
+    class={`tel-input ${className}`}
+    type="tel"
+    aria-label={label}
+    bind:value
+    autocomplete="tel"
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/TelLink/TelLink.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    // TelLink component
+    //
+    // A headless phone number link that renders a clickable tel: link, allowing
+    // users on mobile devices to initiate a phone call by tapping the number.
+    // Useful for contact pages, business listings, user profiles, and customer
+    // support sections. This is the read-only display counterpart in the
+    // Input/View pattern alongside TelInput.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   phone — string, required. The phone number to display and link to (should include country code).
+    //   label — string, default undefined. Optional accessible name via aria-label for additional context.
+    //   ...restProps — additional HTML attributes spread onto the <a>.
+    //
+    // Syntax:
+    //   <TelLink phone="+1-555-0100" />
+    //
+    // Examples:
+    //   <!-- Phone link with accessible context -->
+    //   <TelLink phone="+1-555-0100" label="Call customer support" />
+    //
+    // Keyboard:
+    //   - Tab: focus the link (native <a> behavior)
+    //   - Enter: activate the link (native <a> behavior)
+    //
+    // Accessibility:
+    //   - Native <a> element provides link role and keyboard activation
+    //   - aria-label, when provided, gives accessible context beyond the phone number text
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - Phone number format is consumer-controlled
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - No internal state; purely presentational
+    //
+    // References:
+    //   - MDN tel: links: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#linking_to_telephone_numbers
+    //   - WAI-ARIA Link Role: https://www.w3.org/TR/wai-aria-1.2/#link
+
+    let {
+        class: className = "",
+        phone,
+        label = undefined,
+        ...restProps
+    }: {
+        phone: string;
+        label?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TelLink.svelte -->
+<a
+    class={`tel-link ${className}`}
+    href="tel:{phone}"
+    aria-label={label}
+    {...restProps}>{phone}</a
+>

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

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

package/dist/components/TextAreaInput/TextAreaInput.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+    // TextAreaInput component
+    //
+    // A headless multi-line text input that wraps the native HTML <textarea>
+    // element. Used for comments, messages, descriptions, feedback, code input,
+    // and any scenario where users need to enter extended text content. Unlike
+    // a single-line TextInput, TextAreaInput provides a larger, scrollable text area
+    // that supports multiple lines.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   value — string, default "". Bindable text content; supports bind:value.
+    //   rows — number, default undefined. Number of visible text rows.
+    //   required — boolean, default false. Whether the text-area-input is required.
+    //   disabled — boolean, default false. Whether the text-area-input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <textarea>.
+    //
+    // Syntax:
+    //   <TextAreaInput label="Comments" bind:value rows={5} />
+    //
+    // Examples:
+    //   <!-- Required description field -->
+    //   <TextAreaInput label="Description" bind:value={description} required />
+    //
+    //   <!-- Read-only notes -->
+    //   <TextAreaInput label="Notes" bind:value disabled={isReadOnly} />
+    //
+    // Keyboard:
+    //   - Tab: moves focus to and from the text-area-input (native behavior)
+    //   - Enter: inserts a new line (does not submit forms)
+    //   - All standard text editing keys function normally
+    //
+    // Accessibility:
+    //   - aria-label={label} provides an accessible name since no visible <label> is included
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Uses $bindable() for two-way data binding on value
+    //   - Consumer can wrap with their own visible <label> element
+    //
+    // References:
+    //   - MDN text-area-input element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/text-area-input
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        rows = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Current value. Bindable. */
+        value?: string;
+        /** Number of visible rows. */
+        rows?: number;
+        /** Whether required. */
+        required?: boolean;
+        /** Whether disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TextAreaInput.svelte -->
+<textarea
+    class={`text-area-input ${className}`}
+    aria-label={label}
+    bind:value
+    {rows}
+    {required}
+    {disabled}
+    {...restProps}
+></textarea>

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

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

package/dist/components/TextAreaInputWithCharacterCounter/TextAreaInputWithCharacterCounter.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    // TextAreaInputWithCharacterCounter component
+    //
+    // A headless component that wraps a native <textarea> and a character counter
+    // caption inside a <div>. The counter displays "[number] of [maximum] characters"
+    // below the text-area-input and updates reactively as the user types. Useful for
+    // feedback forms, comment fields, bio inputs, and any interface with a character limit.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the text-area-input via aria-label.
+    //   value — string, default "". Bindable text-area-input value.
+    //   maxLength — number, required. Maximum number of characters allowed.
+    //   counterTemplate — string, default "{count} of {max} characters". Counter text template.
+    //   rows — number, optional. Number of visible text rows.
+    //   placeholder — string, optional. Placeholder text for the text-area-input.
+    //   required — boolean, default false. Whether the text-area-input is required.
+    //   disabled — boolean, default false. Whether the text-area-input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the wrapper <div>.
+    //
+    // Syntax:
+    //   <TextAreaInputWithCharacterCounter label="Feedback" maxLength={500} bind:value />
+    //
+    // Keyboard:
+    //   - Tab: Focus the text-area-input (native browser behavior)
+    //   - Standard text-area-input keyboard interactions
+    //
+    // Accessibility:
+    //   - aria-label on the text-area-input provides accessible name
+    //   - aria-describedby links text-area-input to the counter
+    //   - aria-live="polite" on counter announces updates to screen readers
+    //
+    // Internationalization:
+    //   - counterTemplate prop allows full customization of counter text
+    //   - {count} and {max} placeholders are replaced with actual values
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - restProps spread onto the wrapper <div>, not the text-area-input
+    //
+    // References:
+    //   - MDN text-area-input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/text-area-input
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        maxLength,
+        counterTemplate = "{count} of {max} characters",
+        rows = undefined,
+        placeholder = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        maxLength: number;
+        counterTemplate?: string;
+        rows?: number;
+        placeholder?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    const counterId = `counter-${uid}`;
+
+    let counterText = $derived(
+        counterTemplate.replace("{count}", String(value.length)).replace("{max}", String(maxLength))
+    );
+</script>
+
+<!-- TextAreaInputWithCharacterCounter.svelte -->
+<div
+    class={`text-area-input-with-character-counter ${className}`}
+    {...restProps}
+>
+    <textarea
+        aria-label={label}
+        aria-describedby={counterId}
+        bind:value
+        maxlength={maxLength}
+        {rows}
+        {placeholder}
+        {required}
+        {disabled}
+    ></textarea>
+    <span
+        id={counterId}
+        aria-live="polite"
+    >
+        {counterText}
+    </span>
+</div>

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

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

package/dist/components/TextInput/TextInput.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+    // TextInput component
+    //
+    // A headless single-line text input that wraps the native HTML <input type="text">
+    // element. Used for entering short text values such as names, titles, or other
+    // brief textual data. The component supports accessible labeling via aria-label
+    // and two-way data binding through a bindable value prop.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   value — string, default "". Bindable text value; supports bind:value.
+    //   required — boolean, default false. Whether the field is required.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <TextInput label="Full name" bind:value />
+    //
+    // Examples:
+    //   <!-- Required email field -->
+    //   <TextInput label="Email" bind:value={email} required />
+    //
+    //   <!-- Disabled notes field -->
+    //   <TextInput label="Notes" bind:value={notes} disabled />
+    //
+    // Keyboard:
+    //   - None beyond native input behavior -- standard text editing keys
+    //
+    // Accessibility:
+    //   - aria-label={label} provides an accessible name since no visible <label> is included
+    //
+    // Internationalization:
+    //   - The label prop accepts any translated string
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Uses $bindable() for two-way data binding on value
+    //   - Consumer can add placeholder, maxlength, pattern via restProps
+    //
+    // References:
+    //   - MDN input type="text": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/text
+
+    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>
+
+<!-- TextInput.svelte -->
+<input
+    class={`text-input ${className}`}
+    type="text"
+    aria-label={label}
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

package/dist/components/TextInputWithSearch/TextInputWithSearch.svelte

@@ -0,0 +1,103 @@
+<script lang="ts">
+    // TextInputWithSearch component
+    //
+    // A headless component that wraps a native <input type="text"> and
+    // <button type="button"> inside a <div role="search">. The search button
+    // triggers a callback with the current input value. Pressing Enter in the
+    // input also triggers the search. Useful for search bars, filter inputs,
+    // lookup fields, and any interface with an explicit search action.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the search region via aria-label.
+    //   inputLabel — string, default "Search". Accessible name for the text input.
+    //   searchLabel — string, default "Search". Accessible label and text for the search button.
+    //   value — string, default "". Bindable text input value.
+    //   placeholder — string, optional. Placeholder text for the input.
+    //   onsearch — (value: string) => void, optional. Callback when search is triggered.
+    //   required — boolean, default false. Whether the input is required.
+    //   disabled — boolean, default false. Whether the input and button are disabled.
+    //   ...restProps — additional HTML attributes spread onto the wrapper <div>.
+    //
+    // Syntax:
+    //   <TextInputWithSearch label="Site search" onsearch={handleSearch} bind:value />
+    //
+    // Keyboard:
+    //   - Tab: Moves focus between input and search button
+    //   - Enter in input: Triggers search
+    //   - Enter/Space on button: Triggers search
+    //
+    // Accessibility:
+    //   - role="search" on wrapper for search landmark
+    //   - aria-label on region, input, and button
+    //
+    // Internationalization:
+    //   - label, inputLabel, searchLabel, placeholder are the only user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - restProps spread onto the wrapper <div>, not the input
+    //
+    // References:
+    //   - WAI-ARIA search role: https://www.w3.org/TR/wai-aria-1.2/#search
+
+    let {
+        class: className = "",
+        label,
+        inputLabel = "Search",
+        searchLabel = "Search",
+        value = $bindable(""),
+        placeholder = undefined,
+        onsearch = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        inputLabel?: string;
+        searchLabel?: string;
+        value?: string;
+        placeholder?: string;
+        onsearch?: (value: string) => void;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+
+    function handleSearch() {
+        onsearch?.(value);
+    }
+
+    function handleKeydown(e: KeyboardEvent) {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            handleSearch();
+        }
+    }
+</script>
+
+<!-- TextInputWithSearch.svelte -->
+<div
+    class={`text-input-with-search ${className}`}
+    role="search"
+    aria-label={label}
+    {...restProps}
+>
+    <input
+        type="text"
+        aria-label={inputLabel}
+        bind:value
+        {placeholder}
+        {required}
+        {disabled}
+        onkeydown={handleKeydown}
+    />
+    <button
+        type="button"
+        aria-label={searchLabel}
+        onclick={handleSearch}
+        {disabled}
+    >
+        {searchLabel}
+    </button>
+</div>

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

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

package/dist/components/ThemeProvider/ThemeProvider.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    // ThemeProvider component
+    //
+    // Applies a theme object to the consumer's content by flattening nested
+    // keys into CSS custom properties on a wrapping <div>. Uses
+    // display: contents so the wrapper does not affect layout.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        theme,
+        base = "light" as "light" | "dark",
+        children,
+        ...restProps
+    }: {
+        theme: Record<string, unknown>;
+        base?: "light" | "dark";
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    function flatten(obj: Record<string, unknown>, prefix = "--theme"): Record<string, string> {
+        const out: Record<string, string> = {};
+        for (const [key, value] of Object.entries(obj)) {
+            const k = `${prefix}-${key}`;
+            if (value !== null && typeof value === "object" && !Array.isArray(value)) {
+                Object.assign(out, flatten(value as Record<string, unknown>, k));
+            } else if (value !== undefined && value !== null) {
+                out[k] = String(value);
+            }
+        }
+        return out;
+    }
+
+    let styleString = $derived(
+        "display: contents;" +
+        Object.entries(flatten(theme))
+            .map(([k, v]) => ` ${k}: ${v};`)
+            .join("")
+    );
+</script>
+
+<!-- ThemeProvider.svelte -->
+<div
+    class={`theme-provider ${className}`}
+    data-theme={base}
+    style={styleString}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    theme: Record<string, unknown>;
+    base?: "light" | "dark";
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ThemeProvider: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThemeProvider = ReturnType<typeof ThemeProvider>;
+export default ThemeProvider;