@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/DateField/DateField.svelte

@@ -0,0 +1,116 @@
+<script lang="ts">
+    // DateField component
+    //
+    // A headless date field providing a fully labeled date input with built-in support
+    // for descriptions and error messages. It wraps a native <input type="date"> with
+    // a visible <label>, optional helper text, and validation error display, all linked
+    // via auto-generated IDs for accessibility. Error messages are announced to screen
+    // readers via role="alert". Ideal for forms requiring date input with validation.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Visible label text for the date field.
+    //   value — string, default "". Current date value in YYYY-MM-DD format; bindable via bind:value.
+    //   description — string, default undefined. Helper text displayed below the input.
+    //   error — string, default undefined. Error message displayed when validation fails.
+    //   required — boolean, default false. Whether the field is required.
+    //   disabled — boolean, default false. Whether the field is disabled.
+    //   id — string, default undefined. Custom ID for the input element; auto-generated if omitted.
+    //   ...restProps — additional HTML attributes spread onto the wrapper <div>.
+    //
+    // Syntax:
+    //   <DateField label="Start date" bind:value />
+    //
+    // Examples:
+    //   <!-- Date field with error and required state -->
+    //   <DateField label="End date" bind:value error="Required" required />
+    //   <!-- Date field with description -->
+    //   <DateField label="Birthday" bind:value description="Format: YYYY-MM-DD" />
+    //
+    // Keyboard:
+    //   - None beyond native <input type="date"> keyboard behavior, which varies by browser
+    //
+    // Accessibility:
+    //   - <label for={inputId}> links the visible label to the input
+    //   - aria-describedby links the input to its description text when present
+    //   - aria-invalid="true" indicates the input has an invalid value when error is present
+    //   - aria-errormessage links the input to its error message when present
+    //   - role="alert" on the error paragraph announces errors to screen readers
+    //
+    // Internationalization:
+    //   - The label, description, and error props provide all text; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Auto-generates a unique ID if none is provided, using $derived() for reactivity
+    //   - IDs are derived for description and error elements for proper ARIA linking
+    //
+    // References:
+    //   - ARIA Error Handling: https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA21
+    //   - WAI Forms Tutorial: https://www.w3.org/WAI/tutorials/forms/
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        description = undefined,
+        error = undefined,
+        required = false,
+        disabled = false,
+        id = undefined,
+        ...restProps
+    }: {
+        /** Visible label for the date field. */
+        label: string;
+        /** Current date value in YYYY-MM-DD format. Bindable. */
+        value?: string;
+        /** Helper text displayed below the input. */
+        description?: string;
+        /** Error message when validation fails. */
+        error?: string;
+        /** Whether the field is required. */
+        required?: boolean;
+        /** Whether the field is disabled. */
+        disabled?: boolean;
+        /** Custom id for the input element. */
+        id?: string;
+        [key: string]: unknown;
+    } = $props();
+
+    // Generate a stable id for linking label/input/description/error.
+    const uid = $props.id();
+    const generatedId = `date-field-${uid}`;
+    let inputId = $derived(id ?? generatedId);
+    let descriptionId = $derived(`${inputId}-desc`);
+    let errorId = $derived(`${inputId}-error`);
+</script>
+
+<!-- DateField.svelte -->
+<div
+    class={`date-field ${className}`}
+    {...restProps}
+>
+    <label for={inputId}>{label}</label>
+    <input
+        class="date-input"
+        id={inputId}
+        type="date"
+        bind:value
+        {required}
+        {disabled}
+        aria-describedby={description ? descriptionId : undefined}
+        aria-invalid={error ? true : undefined}
+        aria-errormessage={error ? errorId : undefined}
+    />
+    {#if description}
+        <p id={descriptionId}>{description}</p>
+    {/if}
+    {#if error}
+        <p
+            id={errorId}
+            role="alert"
+        >
+            {error}
+        </p>
+    {/if}
+</div>

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

@@ -0,0 +1,20 @@
+type $$ComponentProps = {
+    /** Visible label for the date field. */
+    label: string;
+    /** Current date value in YYYY-MM-DD format. Bindable. */
+    value?: string;
+    /** Helper text displayed below the input. */
+    description?: string;
+    /** Error message when validation fails. */
+    error?: string;
+    /** Whether the field is required. */
+    required?: boolean;
+    /** Whether the field is disabled. */
+    disabled?: boolean;
+    /** Custom id for the input element. */
+    id?: string;
+    [key: string]: unknown;
+};
+declare const DateField: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateField = ReturnType<typeof DateField>;
+export default DateField;

package/dist/components/DateInput/DateInput.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    // DateInput component
+    //
+    // A headless native date input wrapping <input type="date"> with accessible
+    // labelling via aria-label and a bindable value. The value is stored in ISO 8601
+    // YYYY-MM-DD format. It supports min and max constraints to restrict the allowable
+    // date range. Useful in forms where users need to enter a calendar date with the
+    // browser's built-in date picker.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name applied via aria-label.
+    //   value — string, default "". Bindable date string in YYYY-MM-DD format.
+    //   min — string, default undefined. Minimum allowed date in YYYY-MM-DD format.
+    //   max — string, default undefined. Maximum allowed date in YYYY-MM-DD format.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <DateInput label="Birth date" bind:value />
+    //
+    // Examples:
+    //   <!-- Date input with min/max constraints -->
+    //   <DateInput label="Deadline" bind:value min="2024-01-01" max="2024-12-31" />
+    //   <!-- Required and conditionally disabled -->
+    //   <DateInput label="Start date" bind:value required disabled={isLocked} />
+    //
+    // Keyboard:
+    //   - Tab: Move focus to and from the date input (native browser behavior)
+    //   - Arrow keys: Navigate within the date picker fields (native browser behavior)
+    //   - Enter: Open or confirm the date picker (native browser behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name since there is no visible <label> element
+    //
+    // Internationalization:
+    //   - The label prop provides the accessible name; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Renders a bare <input type="date"> with no wrapper element
+    //   - Uses $bindable() for two-way binding on the value prop
+    //
+    // References:
+    //   - MDN date input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        min = undefined,
+        max = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label for the date input. */
+        label: string;
+        /** Current date value (YYYY-MM-DD). Bindable. */
+        value?: string;
+        /** Minimum date. */
+        min?: string;
+        /** Maximum date. */
+        max?: string;
+        /** Whether the input is required. */
+        required?: boolean;
+        /** Whether the input is disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- DateInput.svelte -->
+<input
+    class={`date-input ${className}`}
+    type="date"
+    aria-label={label}
+    bind:value
+    {min}
+    {max}
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    /** Accessible label for the date input. */
+    label: string;
+    /** Current date value (YYYY-MM-DD). Bindable. */
+    value?: string;
+    /** Minimum date. */
+    min?: string;
+    /** Maximum date. */
+    max?: string;
+    /** Whether the input is required. */
+    required?: boolean;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const DateInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateInput = ReturnType<typeof DateInput>;
+export default DateInput;

package/dist/components/DateRange/DateRange.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    // DateRange component
+    //
+    // A headless date range providing paired start and end date inputs within a
+    // semantic <fieldset>. It allows users to specify a span of time using two native
+    // <input type="date"> elements, each with its own accessible label. Both values
+    // support two-way binding for reactive state management. Commonly used in booking
+    // forms, search filters, reporting interfaces, and scheduling tools.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible group label applied to the fieldset via aria-label.
+    //   startLabel — string, required. Accessible label for the start date input.
+    //   endLabel — string, required. Accessible label for the end date input.
+    //   start — string, default "". Start date value in YYYY-MM-DD format; bindable.
+    //   end — string, default "". End date value in YYYY-MM-DD format; bindable.
+    //   ...restProps — additional HTML attributes spread onto the <fieldset>.
+    //
+    // Syntax:
+    //   <DateRange label="Trip dates" startLabel="Departure" endLabel="Return" bind:start bind:end />
+    //
+    // Examples:
+    //   <!-- Date range for a project timeline -->
+    //   <DateRange
+    //     label="Project timeline"
+    //     startLabel="Start date"
+    //     endLabel="End date"
+    //     bind:start
+    //     bind:end
+    //   />
+    //
+    // Keyboard:
+    //   - Tab: Move focus between the start and end date inputs
+    //   - Arrow keys: Navigate within date picker fields (native browser behavior)
+    //
+    // Accessibility:
+    //   - aria-label on <fieldset> provides an accessible group name for the date range pair
+    //   - aria-label on each input provides individual accessible names
+    //
+    // Internationalization:
+    //   - The label, startLabel, and endLabel props provide all text; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Both start and end use $bindable() for two-way binding
+    //   - Uses <fieldset> to semantically group the paired date inputs
+    //
+    // References:
+    //   - MDN input type="date": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+    //   - MDN fieldset element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset
+
+    let {
+        class: className = "",
+        label,
+        startLabel,
+        endLabel,
+        start = $bindable(""),
+        end = $bindable(""),
+        ...restProps
+    }: {
+        /** Accessible group label. */
+        label: string;
+        /** Start date label. */
+        startLabel: string;
+        /** End date label. */
+        endLabel: string;
+        /** Start date value. Bindable. */
+        start?: string;
+        /** End date value. Bindable. */
+        end?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- DateRange.svelte -->
+<fieldset
+    class={`date-range ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    <input
+        class="date-input"
+        type="date"
+        aria-label={startLabel}
+        bind:value={start}
+    />
+    <input
+        class="date-input"
+        type="date"
+        aria-label={endLabel}
+        bind:value={end}
+    />
+</fieldset>

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

@@ -0,0 +1,16 @@
+type $$ComponentProps = {
+    /** Accessible group label. */
+    label: string;
+    /** Start date label. */
+    startLabel: string;
+    /** End date label. */
+    endLabel: string;
+    /** Start date value. Bindable. */
+    start?: string;
+    /** End date value. Bindable. */
+    end?: string;
+    [key: string]: unknown;
+};
+declare const DateRange: import("svelte").Component<$$ComponentProps, {}, "start" | "end">;
+type DateRange = ReturnType<typeof DateRange>;
+export default DateRange;

package/dist/components/DateTimeLocalInput/DateTimeLocalInput.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+    // DateTimeLocalInput component
+    //
+    // A headless native datetime-local input wrapping <input type="datetime-local">
+    // with accessible labelling via aria-label and a bindable value. The value follows
+    // the format YYYY-MM-DDThh:mm, and the browser provides the native date-time picker
+    // UI. Useful for scheduling interfaces, event creation forms, appointment booking,
+    // and any scenario where both date and time must be captured in a single field.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name applied via aria-label.
+    //   value — string, default "". Bindable datetime string (format: YYYY-MM-DDThh:mm).
+    //   min — string, default undefined. Minimum allowed datetime.
+    //   max — string, default undefined. Maximum allowed datetime.
+    //   required — boolean, default false. Whether the input is required for form submission.
+    //   disabled — boolean, default false. Whether the input is disabled.
+    //   ...restProps — additional HTML attributes spread onto the <input>.
+    //
+    // Syntax:
+    //   <DateTimeLocalInput label="Event start" bind:value />
+    //
+    // Examples:
+    //   <!-- DateTime input with min/max constraints -->
+    //   <DateTimeLocalInput label="Appointment" bind:value min="2024-01-01T08:00" max="2024-12-31T18:00" />
+    //   <!-- Required and conditionally disabled -->
+    //   <DateTimeLocalInput label="Departure time" bind:value required disabled={isLocked} />
+    //
+    // Keyboard:
+    //   - Tab: Move focus to and from the datetime input (native browser behavior)
+    //   - Arrow keys: Navigate within the datetime picker fields (native browser behavior)
+    //   - Enter: Open or confirm the datetime picker (native browser behavior)
+    //
+    // Accessibility:
+    //   - aria-label provides an accessible name since there is no visible <label> element
+    //
+    // Internationalization:
+    //   - The label prop provides the accessible name; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Renders a bare <input type="datetime-local"> with no wrapper element
+    //   - Uses $bindable() for two-way binding on the value prop
+    //
+    // References:
+    //   - MDN datetime-local input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        min = undefined,
+        max = undefined,
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        /** Accessible label for the input. */
+        label: string;
+        /** Current datetime value. Bindable. */
+        value?: string;
+        /** Minimum datetime. */
+        min?: string;
+        /** Maximum datetime. */
+        max?: string;
+        /** Whether the input is required. */
+        required?: boolean;
+        /** Whether the input is disabled. */
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- DateTimeLocalInput.svelte -->
+<input
+    class={`date-time-local-input ${className}`}
+    type="datetime-local"
+    aria-label={label}
+    bind:value
+    {min}
+    {max}
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

@@ -0,0 +1,18 @@
+type $$ComponentProps = {
+    /** Accessible label for the input. */
+    label: string;
+    /** Current datetime value. Bindable. */
+    value?: string;
+    /** Minimum datetime. */
+    min?: string;
+    /** Maximum datetime. */
+    max?: string;
+    /** Whether the input is required. */
+    required?: boolean;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const DateTimeLocalInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type DateTimeLocalInput = ReturnType<typeof DateTimeLocalInput>;
+export default DateTimeLocalInput;

package/dist/components/DateTimeNowInput/DateTimeNowInput.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+    // DateTimeNowInput component
+    //
+    // A headless component that wraps a native <input type="date">, <input type="time">,
+    // and <button type="button"> inside a <div>. The "Now" button sets both inputs to the
+    // current local date and time when clicked. Useful for event logging, timestamping,
+    // incident reporting, and any scenario where users need to quickly capture the current
+    // date and time or manually enter a specific date and time.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the wrapper group via aria-label.
+    //   dateLabel — string, default "Date". Accessible name for the date input via aria-label.
+    //   timeLabel — string, default "Time". Accessible name for the time input via aria-label.
+    //   nowLabel — string, default "Now". Accessible label and text for the "Now" button.
+    //   dateValue — string, default "". Bindable date string (format: YYYY-MM-DD).
+    //   timeValue — string, default "". Bindable time string (format: HH:mm).
+    //   required — boolean, default false. Whether the inputs are required.
+    //   disabled — boolean, default false. Whether the inputs and button are disabled.
+    //   ...restProps — additional HTML attributes spread onto the wrapper <div>.
+    //
+    // Syntax:
+    //   <DateTimeNowInput label="Event time" bind:dateValue bind:timeValue />
+    //
+    // Examples:
+    //   <!-- Basic usage -->
+    //   <DateTimeNowInput label="Event time" bind:dateValue bind:timeValue />
+    //
+    //   <!-- Custom labels for internationalization -->
+    //   <DateTimeNowInput label="Heure" dateLabel="Date" timeLabel="Heure" nowLabel="Maintenant" bind:dateValue bind:timeValue />
+    //
+    //   <!-- Required and disabled -->
+    //   <DateTimeNowInput label="Appointment" bind:dateValue bind:timeValue required disabled={isLocked} />
+    //
+    // Keyboard:
+    //   - Tab: Moves focus between the date input, time input, and "Now" button
+    //   - Enter/Space on the "Now" button: Sets both inputs to the current date and time
+    //   - Arrow keys: Navigate within the date and time picker fields (native browser behavior)
+    //
+    // Accessibility:
+    //   - role="group" on the wrapper with aria-label for grouping
+    //   - aria-label on the date input provides the accessible name
+    //   - aria-label on the time input provides the accessible name
+    //   - aria-label on the "Now" button describes its purpose
+    //
+    // Internationalization:
+    //   - The label, dateLabel, timeLabel, and nowLabel props are the only user-facing strings
+    //   - Default labels are "Date", "Time", and "Now"; override for other locales
+    //   - No other hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - restProps spread onto the wrapper <div>, not the inputs
+    //
+    // References:
+    //   - MDN date input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date
+    //   - MDN time input: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
+
+    let {
+        class: className = "",
+        label,
+        dateLabel = "Date",
+        timeLabel = "Time",
+        nowLabel = "Now",
+        dateValue = $bindable(""),
+        timeValue = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        dateLabel?: string;
+        timeLabel?: string;
+        nowLabel?: string;
+        dateValue?: string;
+        timeValue?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+
+    function handleNow() {
+        const now = new Date();
+        const year = now.getFullYear();
+        const month = String(now.getMonth() + 1).padStart(2, "0");
+        const day = String(now.getDate()).padStart(2, "0");
+        const hours = String(now.getHours()).padStart(2, "0");
+        const minutes = String(now.getMinutes()).padStart(2, "0");
+        dateValue = `${year}-${month}-${day}`;
+        timeValue = `${hours}:${minutes}`;
+    }
+</script>
+
+<!-- DateTimeNowInput.svelte -->
+<div
+    class={`date-time-now-input ${className}`}
+    role="group"
+    aria-label={label}
+    {...restProps}
+>
+    <input
+        type="date"
+        aria-label={dateLabel}
+        bind:value={dateValue}
+        {required}
+        {disabled}
+    />
+    <input
+        type="time"
+        aria-label={timeLabel}
+        bind:value={timeValue}
+        {required}
+        {disabled}
+    />
+    <button
+        type="button"
+        aria-label={nowLabel}
+        onclick={handleNow}
+        {disabled}
+    >
+        {nowLabel}
+    </button>
+</div>

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

@@ -0,0 +1,14 @@
+type $$ComponentProps = {
+    label: string;
+    dateLabel?: string;
+    timeLabel?: string;
+    nowLabel?: string;
+    dateValue?: string;
+    timeValue?: string;
+    required?: boolean;
+    disabled?: boolean;
+    [key: string]: unknown;
+};
+declare const DateTimeNowInput: import("svelte").Component<$$ComponentProps, {}, "dateValue" | "timeValue">;
+type DateTimeNowInput = ReturnType<typeof DateTimeNowInput>;
+export default DateTimeNowInput;

package/dist/components/DateTimeView/DateTimeView.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    // DateTimeView component
+    //
+    // A headless read-only display of a formatted date and time. Renders a native
+    // `<time>` element with the machine-readable `datetime` attribute set to the
+    // ISO 8601 value. Display text falls back: children → format → value.
+    // The component does not localize — consumers pass a pre-formatted display string.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   value — string, required. ISO 8601 datetime value for the `datetime` attribute.
+    //   format — string, optional. Pre-formatted display text.
+    //   label — string, optional. aria-label override.
+    //   children — Snippet, optional. Custom display content (overrides `format`).
+    //   ...restProps — additional HTML attributes spread onto the <time>.
+    //
+    // Syntax:
+    //   <DateTimeView value="2026-01-31T10:00:00Z" format="Jan 31, 2026, 10:00 AM" />
+    //
+    // Examples:
+    //   <DateTimeView value={iso} format={displayText} label="Published" />
+    //
+    // Keyboard:
+    //   - None (read-only display)
+    //
+    // Accessibility:
+    //   - Implicit `<time>` semantics
+    //   - aria-label optional override
+    //
+    // Internationalization:
+    //   - Consumer formats the display text; component renders raw value as fallback
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - Date formatting is the consumer's responsibility (Intl.DateTimeFormat etc.)
+    //
+    // References:
+    //   - MDN <time>: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        value,
+        format = undefined,
+        label = undefined,
+        children = undefined,
+        ...restProps
+    }: {
+        /** ISO 8601 datetime string */
+        value: string;
+        /** Pre-formatted display text */
+        format?: string;
+        /** aria-label override */
+        label?: string;
+        /** Custom display content (overrides format) */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- DateTimeView.svelte -->
+<time
+    class={`date-time-view ${className}`}
+    datetime={value}
+    aria-label={label}
+    {...restProps}
+>
+    {#if children}
+        {@render children?.()}
+    {:else if format}
+        {format}
+    {:else}
+        {value}
+    {/if}
+</time>