@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/SlovenskoRodneCisloView/SlovenskoRodneCisloView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // SlovenskoRodneCisloView component
+    //
+    // A headless display component for showing Slovakia's
+    // Rodné číslo (RČ) in a read-only format.
+    // Format: 10 digits in the form YYMMDDCCCX where MM is 01-12 for males and 51-62 for females; X is a check digit and the whole number is divisible by 11.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". The identifier string to display.
+    //   ...restProps — additional HTML attributes spread onto the <span>.
+    //
+    // Syntax:
+    //   <SlovenskoRodneCisloView label="Slovak Personal Number" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_number#Slovakia
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SlovenskoRodneCisloView.svelte -->
+<span
+    class={`slovensko-rodne-cislo-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/Sonner/Sonner.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    // Sonner component
+    //
+    // A headless toast notification region that provides a designated area where
+    // brief, non-intrusive messages appear to inform users of events, confirmations,
+    // or status updates. Renders a <div> with role="region" and aria-live="polite"
+    // so screen readers announce new notifications without interrupting current output.
+    // Used for success confirmations, error alerts, progress updates, and system messages.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name identifying the notification area via aria-label.
+    //   children — Snippet, required. The toast notification content.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Sonner label="Notifications">
+    //     <div role="status">Message here.</div>
+    //   </Sonner>
+    //
+    // Examples:
+    //   <!-- Success notification -->
+    //   <Sonner label="Notifications">
+    //     <div role="status">File saved successfully.</div>
+    //   </Sonner>
+    //
+    //   <!-- Multiple stacked toasts -->
+    //   <Sonner label="Alerts">
+    //     {#each toasts as toast}
+    //       <div role="status">{toast.message}</div>
+    //     {/each}
+    //   </Sonner>
+    //
+    // Keyboard:
+    //   - None built-in — consumer should implement Escape to dismiss and navigation between toasts.
+    //
+    // Accessibility:
+    //   - role="region" defines the notification area as a named landmark
+    //   - aria-label identifies the notification area
+    //   - aria-live="polite" ensures new content is announced after current screen reader output
+    //
+    // Internationalization:
+    //   - The label prop externalizes the region name for localization
+    //   - Toast content comes through children snippet for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No internal state — purely a structural wrapper
+    //   - Consumer manages toast lifecycle (appearance, auto-dismiss, manual dismiss)
+    //
+    // References:
+    //   - WAI-ARIA Live Regions: https://www.w3.org/TR/wai-aria-1.2/#aria-live
+    //   - WAI-ARIA region role: https://www.w3.org/TR/wai-aria-1.2/#region
+
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: { label: string; children: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<!-- Sonner.svelte -->
+<div
+    class={`sonner ${className}`}
+    role="region"
+    aria-label={label}
+    aria-live="polite"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/Sparkline/Sparkline.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+    // Sparkline component
+    //
+    // A headless sparkline chart container that provides a semantic wrapper with
+    // role="img" for compact, minimalist data visualizations. Sparklines display
+    // trends or variations as tiny line, bar, or win/loss charts, typically embedded
+    // within text or tables. The consumer provides SVG, canvas, or other rendering.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name describing the sparkline data via aria-label.
+    //   children — Snippet, required. The visualization content (SVG, canvas, etc.).
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Sparkline label="Sales trend">
+    //     <svg><!-- sparkline SVG --></svg>
+    //   </Sparkline>
+    //
+    // Examples:
+    //   <!-- Inline sparkline in a table cell -->
+    //   <Sparkline label="Revenue trend over past 7 days">
+    //     <svg viewBox="0 0 100 20"><polyline points="0,20 20,10 40,15 60,5 80,12 100,2" /></svg>
+    //   </Sparkline>
+    //
+    //   <!-- With canvas rendering -->
+    //   <Sparkline label="Temperature last 24 hours">
+    //     <canvas width="100" height="20"></canvas>
+    //   </Sparkline>
+    //
+    // Keyboard:
+    //   - None — this is a passive container for data visualization.
+    //
+    // Accessibility:
+    //   - role="img" identifies the container as a graphical image
+    //   - aria-label describes what the sparkline represents
+    //   - Screen readers announce the label in place of the visual content
+    //
+    // Internationalization:
+    //   - The label prop externalizes the data description for localization
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No internal state or chart rendering — purely a structural wrapper
+    //   - Consumer provides all visualization content via children snippet
+    //
+    // References:
+    //   - WAI-ARIA img role: https://www.w3.org/TR/wai-aria-1.2/#img
+
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: { label: string; children: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<!-- Sparkline.svelte -->
+<span
+    class={`sparkline ${className}`}
+    role="img"
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</span>

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

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

package/dist/components/SplitButton/SplitButton.svelte

@@ -0,0 +1,115 @@
+<script lang="ts">
+    // SplitButton component
+    //
+    // A headless button with a primary action and a dropdown for related actions.
+    // Renders a `<div role="group">` containing two native `<button>` elements
+    // (primary action and menu trigger) and a menu container hidden via the
+    // `hidden` attribute when `menuOpen` is false. The menu content goes in the
+    // `children` snippet.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label for the group.
+    //   primaryLabel — string, REQUIRED. Primary action button label.
+    //   menuLabel — string, REQUIRED. Accessible label for the menu trigger.
+    //   menuOpen — boolean, default false. Whether the menu is open.
+    //   disabled — boolean, default false. Disables both buttons.
+    //   onprimaryclick — (event: MouseEvent) => void, optional. Primary handler.
+    //   onmenutoggle — (event: MouseEvent) => void, optional. Menu toggle handler.
+    //   children — Snippet, required. The menu content (typically a Menu component).
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <SplitButton label="Save options" primaryLabel="Save" menuLabel="More save options"
+    //     menuOpen={open} onprimaryclick={save} onmenutoggle={toggle}>
+    //     <Menu>…</Menu>
+    //   </SplitButton>
+    //
+    // Examples:
+    //   <SplitButton label="Export" primaryLabel="Export PDF" menuLabel="More export options"
+    //     menuOpen={isOpen} onprimaryclick={exportPdf} onmenutoggle={() => isOpen = !isOpen}>
+    //     <ul role="menu">…</ul>
+    //   </SplitButton>
+    //
+    // Keyboard:
+    //   - Tab: Focus moves between primary and trigger
+    //   - Enter / Space: Activates focused button
+    //   - Escape: Consumer should close the menu
+    //
+    // Accessibility:
+    //   - role="group" with aria-label
+    //   - aria-haspopup="menu" and aria-expanded on the trigger button
+    //   - Menu container hidden when closed
+    //
+    // Internationalization:
+    //   - All button labels come through props
+    //
+    // Claude rules:
+    //   - Headless: no styles, no chevron glyph
+    //   - Consumer manages menuOpen state
+    //
+    // References:
+    //   - WAI-ARIA Menu Button: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        primaryLabel,
+        menuLabel,
+        menuOpen = false,
+        disabled = false,
+        onprimaryclick = undefined,
+        onmenutoggle = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label for the group (required) */
+        label: string;
+        /** Primary action button label (required) */
+        primaryLabel: string;
+        /** Accessible label for the menu trigger (required) */
+        menuLabel: string;
+        /** Whether the dropdown menu is open */
+        menuOpen?: boolean;
+        /** Whether both buttons are disabled */
+        disabled?: boolean;
+        /** Primary action handler */
+        onprimaryclick?: (event: MouseEvent) => void;
+        /** Menu toggle handler */
+        onmenutoggle?: (event: MouseEvent) => void;
+        /** The menu content */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SplitButton.svelte -->
+<div
+    class={`split-button ${className}`}
+    role="group"
+    aria-label={label}
+    {...restProps}
+>
+    <button
+        class="split-button-primary"
+        type="button"
+        {disabled}
+        onclick={onprimaryclick}
+    >
+        {primaryLabel}
+    </button>
+    <button
+        class="split-button-menu-trigger"
+        type="button"
+        {disabled}
+        aria-haspopup="menu"
+        aria-expanded={menuOpen}
+        aria-label={menuLabel}
+        onclick={onmenutoggle}
+    ></button>
+    <div class="split-button-menu" hidden={!menuOpen}>
+        {@render children?.()}
+    </div>
+</div>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label for the group (required) */
+    label: string;
+    /** Primary action button label (required) */
+    primaryLabel: string;
+    /** Accessible label for the menu trigger (required) */
+    menuLabel: string;
+    /** Whether the dropdown menu is open */
+    menuOpen?: boolean;
+    /** Whether both buttons are disabled */
+    disabled?: boolean;
+    /** Primary action handler */
+    onprimaryclick?: (event: MouseEvent) => void;
+    /** Menu toggle handler */
+    onmenutoggle?: (event: MouseEvent) => void;
+    /** The menu content */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const SplitButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type SplitButton = ReturnType<typeof SplitButton>;
+export default SplitButton;

package/dist/components/SplitView/SplitView.svelte

@@ -0,0 +1,89 @@
+<script lang="ts">
+    // SplitView component
+    //
+    // A two-panel resizable layout container with a draggable divider between
+    // them. Renders a `<div>` with two `<section>` panels and either a custom
+    // divider snippet or a default `<div role="separator">`.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label for the container.
+    //   orientation — "horizontal" | "vertical", default "horizontal".
+    //   primary — Snippet, REQUIRED. First panel content.
+    //   secondary — Snippet, REQUIRED. Second panel content.
+    //   divider — Snippet, optional. Custom divider content.
+    //   splitPercent — number 0-100, default 50.
+    //
+    // Syntax:
+    //   <SplitView label="Editor and preview">
+    //       {#snippet primary()}…{/snippet}
+    //       {#snippet secondary()}…{/snippet}
+    //   </SplitView>
+    //
+    // Accessibility:
+    //   - Default divider has role="separator", aria-orientation,
+    //     aria-valuenow / aria-valuemin / aria-valuemax, tabindex="0".
+    //
+    // Internationalization:
+    //   - All user-facing strings via props
+    //
+    // References:
+    //   - WAI-ARIA Window Splitter Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        orientation = "horizontal",
+        primary,
+        secondary,
+        divider = undefined,
+        splitPercent = 50,
+        ...restProps
+    }: {
+        class?: string;
+        /** Accessible label for the container (REQUIRED) */
+        label: string;
+        /** Orientation of the divider */
+        orientation?: "horizontal" | "vertical";
+        /** First panel content (REQUIRED) */
+        primary: Snippet;
+        /** Second panel content (REQUIRED) */
+        secondary: Snippet;
+        /** Custom divider content */
+        divider?: Snippet;
+        /** Initial split position as percentage (0-100) */
+        splitPercent?: number;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- SplitView.svelte -->
+<div
+    class={`split-view ${className}`}
+    aria-label={label}
+    data-orientation={orientation}
+    data-split-percent={splitPercent}
+    {...restProps}
+>
+    <section class="split-view-primary">
+        {@render primary()}
+    </section>
+    {#if divider}
+        {@render divider()}
+    {:else}
+        <div
+            class="split-view-divider"
+            role="separator"
+            aria-orientation={orientation}
+            aria-valuenow={splitPercent}
+            aria-valuemin={0}
+            aria-valuemax={100}
+            tabindex="0"
+        ></div>
+    {/if}
+    <section class="split-view-secondary">
+        {@render secondary()}
+    </section>
+</div>

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

@@ -0,0 +1,20 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    /** Accessible label for the container (REQUIRED) */
+    label: string;
+    /** Orientation of the divider */
+    orientation?: "horizontal" | "vertical";
+    /** First panel content (REQUIRED) */
+    primary: Snippet;
+    /** Second panel content (REQUIRED) */
+    secondary: Snippet;
+    /** Custom divider content */
+    divider?: Snippet;
+    /** Initial split position as percentage (0-100) */
+    splitPercent?: number;
+    [key: string]: unknown;
+};
+declare const SplitView: import("svelte").Component<$$ComponentProps, {}, "">;
+type SplitView = ReturnType<typeof SplitView>;
+export default SplitView;

package/dist/components/Splitter/Splitter.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    // Splitter component
+    //
+    // A headless draggable separator between resizable panels that uses the ARIA
+    // separator role with keyboard focus and value tracking. Renders a <div> with
+    // orientation, value range, and accessible labeling. Used between adjacent panels
+    // to provide a visual and interactive handle for resizing.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the splitter via aria-label.
+    //   orientation — "horizontal" | "vertical", default "vertical". The split direction.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Splitter label="Resize panels" orientation="vertical" />
+    //
+    // Examples:
+    //   <!-- Horizontal splitter between top and bottom panels -->
+    //   <Splitter label="Resize editor and preview" orientation="horizontal" />
+    //
+    //   <!-- Vertical splitter with custom aria-valuenow -->
+    //   <Splitter label="Resize sidebar" orientation="vertical" aria-valuenow={splitPos} />
+    //
+    // Keyboard:
+    //   - Tab: moves focus to the splitter
+    //   - Arrow keys: consumer should implement to adjust split position
+    //   - Home: consumer should implement to set minimum position
+    //   - End: consumer should implement to set maximum position
+    //
+    // Accessibility:
+    //   - role="separator" identifies the element as a separator between regions
+    //   - aria-label provides an accessible name describing the splitter's purpose
+    //   - aria-orientation indicates horizontal or vertical direction
+    //   - aria-valuenow/aria-valuemin/aria-valuemax report the split position
+    //   - tabindex="0" makes the splitter keyboard-focusable
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Default value attributes (50/0/100); consumer updates dynamically
+    //   - Consumer implements drag handlers and keyboard event handlers
+    //   - No children — renders as an empty focusable div
+    //
+    // References:
+    //   - WAI-ARIA Window Splitter Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/windowsplitter/
+    //   - WAI-ARIA Separator Role: https://www.w3.org/TR/wai-aria-1.2/#separator
+
+    let {
+        class: className = "",
+        label,
+        orientation = "vertical",
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Orientation of the split. */
+        orientation?: "horizontal" | "vertical";
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Splitter.svelte -->
+<div
+    class={`splitter ${className}`}
+    role="separator"
+    aria-label={label}
+    aria-orientation={orientation}
+    tabindex="0"
+    aria-valuenow={50}
+    aria-valuemin={0}
+    aria-valuemax={100}
+    {...restProps}
+></div>

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

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    /** Accessible label. */
+    label: string;
+    /** Orientation of the split. */
+    orientation?: "horizontal" | "vertical";
+    [key: string]: unknown;
+};
+declare const Splitter: import("svelte").Component<$$ComponentProps, {}, "">;
+type Splitter = ReturnType<typeof Splitter>;
+export default Splitter;

package/dist/components/Statistic/Statistic.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+    // Statistic component
+    //
+    // A numeric value display with title, prefix, and suffix. The consumer is
+    // responsible for formatting the value as a string (number formatting,
+    // localization). The component renders a role="group" container with a
+    // title and a value, optionally wrapped by a prefix snippet and a suffix
+    // snippet.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   title — string, REQUIRED. Statistic label/heading.
+    //   value — string, REQUIRED. Pre-formatted value text.
+    //   label — string, optional. aria-label override (defaults to "{title}: {value}").
+    //   prefix — Snippet, optional. Element before the value (e.g., currency symbol).
+    //   suffix — Snippet, optional. Element after the value (e.g., unit or %).
+    //   ...restProps — additional HTML attributes spread onto the root <div>.
+    //
+    // Syntax:
+    //   <Statistic title="Active users" value="1,234" />
+    //
+    // Examples:
+    //   <Statistic title="Revenue" value="42">
+    //     {#snippet prefix()}$ {/snippet}
+    //     {#snippet suffix()} M{/snippet}
+    //   </Statistic>
+    //
+    // Accessibility:
+    //   - role="group" with aria-label so screen readers announce the pair.
+    //
+    // Internationalization:
+    //   - title, value, label all come through props; consumer formats numbers.
+    //
+    // Claude rules:
+    //   - Headless: no styles.
+    //   - title and value are REQUIRED.
+    //
+    // References:
+    //   - Ant Design Statistic: https://ant.design/components/statistic
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        title,
+        value,
+        label = undefined,
+        prefix = undefined,
+        suffix = undefined,
+        ...restProps
+    }: {
+        /** CSS class appended to the base class */
+        class?: string;
+        /** Statistic title (REQUIRED) */
+        title: string;
+        /** Pre-formatted value text (REQUIRED) */
+        value: string;
+        /** aria-label override */
+        label?: string;
+        /** Element before the value */
+        prefix?: Snippet;
+        /** Element after the value */
+        suffix?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const ariaLabel = $derived(label ?? `${title}: ${value}`);
+</script>
+
+<!-- Statistic.svelte -->
+<div
+    class={`statistic ${className}`}
+    role="group"
+    aria-label={ariaLabel}
+    {...restProps}
+>
+    <div class="statistic-title">{title}</div>
+    <div class="statistic-value">
+        {#if prefix}<span class="statistic-prefix">{@render prefix()}</span>{/if}
+        {value}
+        {#if suffix}<span class="statistic-suffix">{@render suffix()}</span>{/if}
+    </div>
+</div>

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

@@ -0,0 +1,19 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** CSS class appended to the base class */
+    class?: string;
+    /** Statistic title (REQUIRED) */
+    title: string;
+    /** Pre-formatted value text (REQUIRED) */
+    value: string;
+    /** aria-label override */
+    label?: string;
+    /** Element before the value */
+    prefix?: Snippet;
+    /** Element after the value */
+    suffix?: Snippet;
+    [key: string]: unknown;
+};
+declare const Statistic: import("svelte").Component<$$ComponentProps, {}, "">;
+type Statistic = ReturnType<typeof Statistic>;
+export default Statistic;