@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/RomaniaCodNumericPersonalView/RomaniaCodNumericPersonalView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // RomaniaCodNumericPersonalView component
+    //
+    // A headless display component for showing Romania's
+    // Cod Numeric Personal (CNP) in a read-only format.
+    // Format: 13 digits: gender and century (1/3/5/7 male; 2/4/6/8 female; 9 foreigner), date of birth (YYMMDD), country zone (01-52, or 99 for Bucharest sectors), serial (3 digits), and a Modulus-11 checksum digit.
+    //
+    // 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:
+    //   <RomaniaCodNumericPersonalView label="Personal Numerical Code" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/National_identification_number#Romania
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RomaniaCodNumericPersonalView.svelte -->
+<span
+    class={`romania-cod-numeric-personal-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

package/dist/components/RomaniaPasaportInput/RomaniaPasaportInput.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+    // RomaniaPasaportInput component
+    //
+    // A headless input for entering Romania's Paşaport.
+    // Format: 8 characters: positions 1-2 [A-Z] and positions 3-8 [0-9].
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for screen readers via aria-label.
+    //   value — string, default "". Bindable input value; supports bind:value.
+    //   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:
+    //   <RomaniaPasaportInput label="Romanian Passport" bind:value />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - autocomplete="off" protects sensitive identifiers
+    //   - required and disabled states are conveyed to assistive technology
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Romanian_passport
+
+    let {
+        class: className = "",
+        label,
+        value = $bindable(""),
+        required = false,
+        disabled = false,
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        required?: boolean;
+        disabled?: boolean;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RomaniaPasaportInput.svelte -->
+<input
+    class={`romania-pasaport-input ${className}`}
+    type="text"
+    aria-label={label}
+    autocomplete="off"
+    bind:value
+    {required}
+    {disabled}
+    {...restProps}
+/>

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

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

package/dist/components/RomaniaPasaportView/RomaniaPasaportView.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    // RomaniaPasaportView component
+    //
+    // A headless display component for showing Romania's
+    // Paşaport in a read-only format.
+    // Format: 8 characters: positions 1-2 [A-Z] and positions 3-8 [0-9].
+    //
+    // 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:
+    //   <RomaniaPasaportView label="Romanian Passport" value={value} />
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name so screen readers announce the purpose
+    //
+    // References:
+    //   - https://en.wikipedia.org/wiki/Romanian_passport
+
+    let {
+        class: className = "",
+        label,
+        value = "",
+        ...restProps
+    }: {
+        label: string;
+        value?: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- RomaniaPasaportView.svelte -->
+<span
+    class={`romania-pasaport-view ${className}`}
+    aria-label={label}
+    {...restProps}>{value}</span
+>

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

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

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

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

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

package/dist/components/ScreenReaderSpan/ScreenReaderSpan.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ScreenReaderSpan.svelte -->
+<div class={`screen-reader-span ${className}`} aria-label={label} {...restProps}>
+    {@render children?.()}
+</div>

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

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

package/dist/components/ScrollArea/ScrollArea.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+    // ScrollArea component
+    //
+    // A headless scrollable container that provides keyboard accessibility for
+    // overflowing content. Renders a focusable <div> region so keyboard users can
+    // scroll through long lists, code blocks, chat messages, or data tables using
+    // standard scrolling keys without needing a mouse.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name for the scrollable region via aria-label.
+    //   children — Snippet, required. Scrollable content to render inside the container.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <ScrollArea label="Scrollable content">
+    //     <p>Long content...</p>
+    //   </ScrollArea>
+    //
+    // Examples:
+    //   <!-- Chat messages area -->
+    //   <ScrollArea label="Chat messages">
+    //     {#each messages as msg}<p>{msg}</p>{/each}
+    //   </ScrollArea>
+    //
+    //   <!-- Code block with custom styling -->
+    //   <ScrollArea label="Source code" style="overflow:auto; max-height:300px;">
+    //     <pre><code>{source}</code></pre>
+    //   </ScrollArea>
+    //
+    // Keyboard:
+    //   - Tab: moves focus to the scroll area container
+    //   - Arrow Up/Down: scrolls content vertically (native browser behavior)
+    //   - Arrow Left/Right: scrolls content horizontally (native browser behavior)
+    //   - Page Up/Down: scrolls by one page (native browser behavior)
+    //   - Home/End: scrolls to beginning or end (native browser behavior)
+    //
+    // Accessibility:
+    //   - role="region" identifies the container as a landmark
+    //   - aria-label describes what content is scrollable
+    //   - tabindex="0" makes the container keyboard-focusable for scrolling
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Consumer must apply CSS overflow and dimension properties for actual scrolling
+    //   - No internal scroll logic — relies on native browser scroll behavior
+    //
+    // References:
+    //   - WAI-ARIA Region Role: https://www.w3.org/TR/wai-aria-1.2/#region
+    //   - WCAG 2.1 Reflow: https://www.w3.org/WAI/WCAG21/Understanding/reflow.html
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Scrollable content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ScrollArea.svelte -->
+<div
+    class={`scroll-area ${className}`}
+    role="region"
+    aria-label={label}
+    tabindex="0"
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/ScrollBar/ScrollBar.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    // ScrollBar component
+    //
+    // A headless scrollbar track element that provides the ARIA scrollbar role
+    // and value attributes for a custom scrollbar control. Renders a <div> with
+    // orientation, value range, and accessible labeling. The consumer provides the
+    // visual thumb element as children and implements drag/scroll interaction logic.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   orientation — "vertical" | "horizontal", default "vertical". The scrollbar direction.
+    //   label — string, required. Accessible name for the scrollbar via aria-label.
+    //   children — Snippet, required. ScrollBar content, typically the draggable thumb element.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <ScrollBar orientation="vertical" label="Scroll">
+    //     <div>thumb</div>
+    //   </ScrollBar>
+    //
+    // Examples:
+    //   <!-- Horizontal scrollbar for a timeline -->
+    //   <ScrollBar orientation="horizontal" label="Timeline scroll">
+    //     <div class="thumb"></div>
+    //   </ScrollBar>
+    //
+    //   <!-- Vertical scrollbar with custom attributes -->
+    //   <ScrollBar orientation="vertical" label="Page scroll" aria-valuenow={scrollPos}>
+    //     <div class="thumb"></div>
+    //   </ScrollBar>
+    //
+    // Keyboard:
+    //   - Arrow Up/Left: scroll backward (decrease value) — consumer must implement
+    //   - Arrow Down/Right: scroll forward (increase value) — consumer must implement
+    //   - Page Up/Down: scroll by large increment — consumer must implement
+    //   - Home: scroll to beginning — consumer must implement
+    //   - End: scroll to end — consumer must implement
+    //
+    // Accessibility:
+    //   - role="scrollbar" identifies the element as a scrollbar control
+    //   - aria-orientation indicates horizontal or vertical direction
+    //   - aria-valuenow/aria-valuemin/aria-valuemax track scroll position
+    //   - aria-label provides the accessible name
+    //
+    // Internationalization:
+    //   - The label prop externalizes the accessible label string
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Initial value attributes (0/0/100) are defaults; consumer updates dynamically
+    //   - Consumer implements all drag handling and position updates
+    //
+    // References:
+    //   - WAI-ARIA scrollbar role: https://www.w3.org/TR/wai-aria-1.2/#scrollbar
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        orientation = "vertical",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** ScrollBar orientation. */
+        orientation?: "vertical" | "horizontal";
+        /** Accessible label. */
+        label: string;
+        /** ScrollBar content. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- ScrollBar.svelte -->
+<div
+    class={`scroll-bar ${className}`}
+    role="scrollbar"
+    aria-label={label}
+    aria-orientation={orientation}
+    aria-valuenow={0}
+    aria-valuemin={0}
+    aria-valuemax={100}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** ScrollBar orientation. */
+    orientation?: "vertical" | "horizontal";
+    /** Accessible label. */
+    label: string;
+    /** ScrollBar content. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const ScrollBar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ScrollBar = ReturnType<typeof ScrollBar>;
+export default ScrollBar;

package/dist/components/Scroller/Scroller.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    // Scroller component
+    //
+    // Scrollytelling container with a sticky `background` snippet that
+    // updates as foreground steps scroll past. Built on ScrollerBase.
+
+    import type { Snippet } from "svelte";
+    import ScrollerBase from "../ScrollerBase/ScrollerBase.svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        offset = 0.5,
+        onIndexChange = undefined,
+        onProgressChange = undefined,
+        children,
+        background,
+        ...restProps
+    }: {
+        label?: string;
+        offset?: number;
+        onIndexChange?: (index: number) => void;
+        onProgressChange?: (progress: number) => void;
+        children: Snippet;
+        background: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Scroller.svelte -->
+<div
+    class={`scroller ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    <div class="scroller-background" aria-live="polite">
+        {@render background?.()}
+    </div>
+    <ScrollerBase
+        class="scroller-foreground"
+        {offset}
+        {onIndexChange}
+        {onProgressChange}
+    >
+        {@render children?.()}
+    </ScrollerBase>
+</div>

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

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

package/dist/components/ScrollerBase/ScrollerBase.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+    // ScrollerBase component
+    //
+    // A low-level scroll-position tracking primitive for scrollytelling.
+    // Direct children are treated as steps. IntersectionObserver reports
+    // the active step index (via onIndexChange callback), and a scroll
+    // listener computes overall progress (via onProgressChange).
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        offset = 0.5,
+        onIndexChange = undefined,
+        onProgressChange = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        offset?: number;
+        onIndexChange?: (index: number) => void;
+        onProgressChange?: (progress: number) => void;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let scrollerEl: HTMLDivElement | undefined = $state(undefined);
+
+    $effect(() => {
+        const root = scrollerEl;
+        if (!root || typeof IntersectionObserver === "undefined") return;
+
+        const steps = Array.from(root.children) as HTMLElement[];
+        const triggerFromTop = `${(offset * 100).toFixed(2)}%`;
+
+        const observer = new IntersectionObserver(
+            (entries) => {
+                for (const entry of entries) {
+                    if (entry.isIntersecting) {
+                        const idx = steps.indexOf(entry.target as HTMLElement);
+                        if (idx !== -1) onIndexChange?.(idx);
+                    }
+                }
+            },
+            {
+                rootMargin: `-${triggerFromTop} 0px -${(100 - offset * 100).toFixed(2)}% 0px`,
+                threshold: 0,
+            }
+        );
+        for (const step of steps) observer.observe(step);
+
+        const onScroll = () => {
+            const rect = root.getBoundingClientRect();
+            const winH = window.innerHeight || 1;
+            const total = rect.height + winH;
+            const passed = winH - rect.top;
+            const progress = Math.max(0, Math.min(1, passed / total));
+            onProgressChange?.(progress);
+        };
+        window.addEventListener("scroll", onScroll, { passive: true });
+        onScroll();
+
+        return () => {
+            observer.disconnect();
+            window.removeEventListener("scroll", onScroll);
+        };
+    });
+</script>
+
+<!-- ScrollerBase.svelte -->
+<div
+    bind:this={scrollerEl}
+    class={`scroller-base ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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

package/dist/components/ScrollerVideo/ScrollerVideo.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    // ScrollerVideo component
+    //
+    // Scroll-driven video: the muted <video> currentTime advances
+    // proportionally to scroll progress. Foreground children scroll over
+    // the sticky video.
+
+    import type { Snippet } from "svelte";
+    import ScrollerBase from "../ScrollerBase/ScrollerBase.svelte";
+
+    let {
+        class: className = "",
+        src,
+        label,
+        alt,
+        offset = 0.5,
+        onIndexChange = undefined,
+        onProgressChange = undefined,
+        children,
+        ...restProps
+    }: {
+        src: string;
+        label: string;
+        alt: string;
+        offset?: number;
+        onIndexChange?: (index: number) => void;
+        onProgressChange?: (progress: number) => void;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let videoEl: HTMLVideoElement | undefined = $state(undefined);
+
+    function handleProgress(progress: number) {
+        if (videoEl && Number.isFinite(videoEl.duration) && videoEl.duration > 0) {
+            videoEl.currentTime = videoEl.duration * progress;
+        }
+        onProgressChange?.(progress);
+    }
+
+    $effect(() => {
+        if (videoEl) {
+            videoEl.muted = true;
+            (videoEl as any).playsInline = true;
+        }
+    });
+</script>
+
+<!-- ScrollerVideo.svelte -->
+<div
+    class={`scroller-video ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    <div
+        class="scroller-video-background"
+        role="img"
+        aria-roledescription="scrollable video"
+        aria-label={alt}
+    >
+        <video
+            bind:this={videoEl}
+            class="scroller-video-element"
+            {src}
+            muted
+            playsinline
+            preload="auto"
+        ></video>
+    </div>
+    <ScrollerBase
+        class="scroller-video-foreground"
+        {offset}
+        {onIndexChange}
+        onProgressChange={handleProgress}
+    >
+        {@render children?.()}
+    </ScrollerBase>
+</div>