@lilydesignsystem/svelte-headless 0.2.0 → 0.4.0

package/dist/components/FileTree/FileTree.svelte

@@ -0,0 +1,210 @@
+<script lang="ts">
+    // FileTree component
+    //
+    // A headless hierarchical tree (folders and files) following the WAI-ARIA APG
+    // tree pattern. The consumer supplies <li role="treeitem"> descendants, with a
+    // nested <ul role="group"> inside each folder item and aria-expanded on folders.
+    // The root owns the keyboard and a ROVING TABINDEX: exactly one visible item has
+    // tabindex="0", all others -1. Opening/closing is done by toggling aria-expanded;
+    // hiding a closed folder's group is consumer CSS.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible name via aria-label.
+    //   children — Snippet. The tree items.
+    //   ...restProps — additional HTML attributes spread onto the root <ul>.
+    //
+    // Keyboard (focus on a treeitem):
+    //   - ArrowDown / ArrowUp: next / previous visible item (clamped, no wrap)
+    //   - ArrowRight: closed folder opens; open folder moves to first child
+    //   - ArrowLeft: open folder closes; otherwise moves to the parent folder
+    //   - Home / End: first / last visible item
+    //   - * : expand all sibling folders at the focused level
+    //   - Printable characters: typeahead on the item's own text
+    //   - Enter / Space: activate (clicks the item)
+    //
+    // Accessibility:
+    //   - role="tree" on the root; consumer supplies treeitem/group roles and aria-selected
+    //
+    // Claude rules:
+    //   - Headless: no CSS; state is aria-expanded only; no events beyond native click
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label. */
+        label: string;
+        /** Tree item elements. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let treeRef: HTMLElement | undefined = $state(undefined);
+    let buffer = "";
+    let bufferTimer: ReturnType<typeof setTimeout> | undefined;
+
+    function allItems(): HTMLElement[] {
+        return treeRef ? Array.from(treeRef.querySelectorAll<HTMLElement>("[role='treeitem']")) : [];
+    }
+
+    function parentItem(item: HTMLElement): HTMLElement | null {
+        return item.parentElement?.closest<HTMLElement>("[role='treeitem']") ?? null;
+    }
+
+    function isVisible(item: HTMLElement): boolean {
+        let p = parentItem(item);
+        while (p) {
+            if (p.getAttribute("aria-expanded") === "false") return false;
+            p = parentItem(p);
+        }
+        return true;
+    }
+
+    function visibleItems(): HTMLElement[] {
+        return allItems().filter(isVisible);
+    }
+
+    // The item's own text, excluding any nested group.
+    function ownText(item: HTMLElement): string {
+        let text = "";
+        item.childNodes.forEach((n) => {
+            if (n.nodeType === Node.ELEMENT_NODE && (n as HTMLElement).getAttribute("role") === "group") return;
+            text += n.textContent ?? "";
+        });
+        return text.trim().toLowerCase();
+    }
+
+    function setStop(target: HTMLElement | undefined) {
+        for (const item of allItems()) {
+            item.setAttribute("tabindex", item === target ? "0" : "-1");
+        }
+    }
+
+    // Keep exactly one tab stop, on a visible item.
+    function normalise() {
+        const visible = visibleItems();
+        if (visible.length === 0) return;
+        const stops = allItems().filter((i) => i.getAttribute("tabindex") === "0");
+        if (stops.length === 1 && isVisible(stops[0])) return;
+        const keep =
+            stops.find(isVisible) ??
+            visible.find((i) => i.getAttribute("aria-selected") === "true") ??
+            visible[0];
+        setStop(keep);
+    }
+
+    $effect(() => {
+        if (!treeRef) return;
+        normalise();
+        const observer = new MutationObserver(normalise);
+        observer.observe(treeRef, {
+            subtree: true,
+            childList: true,
+            attributes: true,
+            attributeFilter: ["aria-expanded"],
+        });
+        return () => observer.disconnect();
+    });
+
+    function onfocusin(event: FocusEvent) {
+        const item = (event.target as HTMLElement).closest<HTMLElement>("[role='treeitem']");
+        if (item && treeRef?.contains(item)) setStop(item);
+    }
+
+    function focusItem(item: HTMLElement | undefined) {
+        if (!item) return;
+        setStop(item);
+        item.focus();
+    }
+
+    function onkeydown(event: KeyboardEvent) {
+        const target = event.target as HTMLElement;
+        const item = target.closest<HTMLElement>("[role='treeitem']");
+        if (!item || !treeRef?.contains(item)) return;
+        if (event.ctrlKey || event.metaKey || event.altKey) return;
+
+        const visible = visibleItems();
+        const index = visible.indexOf(item);
+        const expanded = item.getAttribute("aria-expanded");
+
+        switch (event.key) {
+            case "ArrowDown":
+                event.preventDefault();
+                focusItem(visible[Math.min(index + 1, visible.length - 1)]);
+                return;
+            case "ArrowUp":
+                event.preventDefault();
+                focusItem(visible[Math.max(index - 1, 0)]);
+                return;
+            case "Home":
+                event.preventDefault();
+                focusItem(visible[0]);
+                return;
+            case "End":
+                event.preventDefault();
+                focusItem(visible[visible.length - 1]);
+                return;
+            case "ArrowRight":
+                if (target !== item) return;
+                event.preventDefault();
+                if (expanded === "false") {
+                    item.setAttribute("aria-expanded", "true");
+                } else if (expanded === "true") {
+                    focusItem(item.querySelector<HTMLElement>("[role='group'] [role='treeitem']") ?? undefined);
+                }
+                return;
+            case "ArrowLeft":
+                if (target !== item) return;
+                event.preventDefault();
+                if (expanded === "true") {
+                    item.setAttribute("aria-expanded", "false");
+                } else {
+                    focusItem(parentItem(item) ?? undefined);
+                }
+                return;
+            case "Enter":
+            case " ":
+                if (target !== item) return;
+                event.preventDefault();
+                item.click();
+                return;
+            case "*":
+                event.preventDefault();
+                for (const sibling of Array.from(item.parentElement?.children ?? [])) {
+                    if (sibling.getAttribute("role") === "treeitem" && sibling.getAttribute("aria-expanded") === "false") {
+                        sibling.setAttribute("aria-expanded", "true");
+                    }
+                }
+                return;
+        }
+
+        // Typeahead
+        if (event.key.length === 1) {
+            event.preventDefault();
+            buffer += event.key.toLowerCase();
+            clearTimeout(bufferTimer);
+            bufferTimer = setTimeout(() => (buffer = ""), 500);
+            const cycle = buffer.length === 1 || [...buffer].every((c) => c === buffer[0]);
+            const needle = cycle ? buffer[0] : buffer;
+            const ordered = [...visible.slice(index + (cycle ? 1 : 0)), ...visible.slice(0, index + (cycle ? 1 : 0))];
+            focusItem(ordered.find((i) => ownText(i).startsWith(needle)));
+        }
+    }
+</script>
+
+<!-- FileTree.svelte -->
+<ul
+    class={`file-tree ${className}`}
+    role="tree"
+    aria-label={label}
+    bind:this={treeRef}
+    {onkeydown}
+    {onfocusin}
+    {...restProps}
+>
+    {@render children?.()}
+</ul>

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

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

package/dist/components/FunnelChart/FunnelChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // FunnelChart component
+    //
+    // A headless chart container for a chart of stages narrowing from top to bottom, showing how a quantity drops at each step. The consumer supplies the inline
+    // svg as `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, optional. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="funnel-chart">
+    //     <div class="funnel-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="funnel-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label?: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- FunnelChart.svelte -->
+<figure
+    class={`funnel-chart ${className}`}
+    {...restProps}
+>
+    <div class="funnel-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="funnel-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label?: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const FunnelChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type FunnelChart = ReturnType<typeof FunnelChart>;
+export default FunnelChart;

package/dist/components/GanttTable/GanttTable.svelte

@@ -16,17 +16,17 @@
     // Syntax:
     //   <GanttTable label="Project timeline">
     //     <GanttTableHead>
-    //       <GanttTableTR>
+    //       <GanttTableTr>
     //         <th>Task</th><th>Week 1</th><th>Week 2</th><th>Week 3</th>
-    //       </GanttTableTR>
+    //       </GanttTableTr>
     //     </GanttTableHead>
     //     <GanttTableBody>
-    //       <GanttTableTR>
+    //       <GanttTableTr>
     //         <th>Design</th>
     //         <GanttTableTD active>---</GanttTableTD>
     //         <GanttTableTD />
     //         <GanttTableTD />
-    //       </GanttTableTR>
+    //       </GanttTableTr>
     //     </GanttTableBody>
     //   </GanttTable>
     //
@@ -46,7 +46,7 @@
     // Claude rules:
     //   - Headless: no CSS, no styles — consumer provides all styling
     //   - Compound component: use with GanttTableHead, GanttTableBody, GanttTableTfoot,
-    //     GanttTableTR, GanttTableTD, and GanttTableTH
+    //     GanttTableTr, GanttTableTD, and GanttTableTH
     //
     // References:
     //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/

package/dist/components/GanttTableTD/GanttTableTD.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     // GanttTableTD component
     //
-    // A single cell within a GanttTableTR representing a time period in the
+    // A single cell within a GanttTableTr representing a time period in the
     // Gantt table grid. Renders as a <td> with role="gridcell". Supports an
     // active state to indicate the task spans this time period, communicated
     // via aria-selected for screen readers.
@@ -39,7 +39,7 @@
     //
     // Claude rules:
     //   - Headless: no CSS, no styles — consumer provides all styling
-    //   - Must be used inside a GanttTableTR (which provides the <tr>)
+    //   - Must be used inside a GanttTableTr (which provides the <tr>)
     //   - Children are optional — empty cells represent inactive time periods
     //
     // References:

package/dist/components/GanttTableTH/GanttTableTH.svelte

@@ -2,7 +2,7 @@
     // GanttTableTH component
     //
     // A column header cell within a GanttTable, rendered as a <th> element.
-    // Used inside a <GanttTableTR> within <GanttTableHead> to label the time
+    // Used inside a <GanttTableTr> within <GanttTableHead> to label the time
     // period columns of the Gantt grid (days, weeks, milestones, etc.).
     //
     // Props:
@@ -15,10 +15,10 @@
     //
     // Syntax:
     //   <GanttTableHead>
-    //     <GanttTableTR>
+    //     <GanttTableTr>
     //       <GanttTableTH>Week 1</GanttTableTH>
     //       <GanttTableTH>Week 2</GanttTableTH>
-    //     </GanttTableTR>
+    //     </GanttTableTr>
     //   </GanttTableHead>
     //
     // Keyboard:

package/dist/components/GanttTableTbody/GanttTableTbody.svelte

@@ -2,19 +2,19 @@
     // GanttTableBody component
     //
     // The body section of a GanttTable, rendered as a <tbody> element.
-    // Contains GanttTableTR elements with task data cells.
+    // Contains GanttTableTr elements with task data cells.
     //
     // Props:
     //   className — string, optional. CSS class name.
-    //   children — Snippet, required. GanttTableTR elements with data cells.
+    //   children — Snippet, required. GanttTableTr elements with data cells.
     //   ...restProps — additional HTML attributes spread onto the <tbody>.
     //
     // Syntax:
     //   <GanttTableBody>
-    //     <GanttTableTR>
+    //     <GanttTableTr>
     //       <GanttTableTD>Design</GanttTableTD>
     //       <GanttTableTD>Jan 1</GanttTableTD>
-    //     </GanttTableTR>
+    //     </GanttTableTr>
     //   </GanttTableBody>
     //
     // Keyboard:
@@ -38,7 +38,7 @@
         children,
         ...restProps
     }: {
-        /** GanttTableTR elements with task data cells. */
+        /** GanttTableTr elements with task data cells. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    /** GanttTableTR elements with task data cells. */
+    /** GanttTableTr elements with task data cells. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/GanttTableTfoot/GanttTableTfoot.svelte

@@ -2,18 +2,18 @@
     // GanttTableTfoot component
     //
     // The footer section of a GanttTable, rendered as a <tfoot> element.
-    // Contains GanttTableTR elements with summary or aggregate data cells.
+    // Contains GanttTableTr elements with summary or aggregate data cells.
     //
     // Props:
     //   className — string, optional. CSS class name.
-    //   children — Snippet, required. GanttTableTR elements with footer cells.
+    //   children — Snippet, required. GanttTableTr elements with footer cells.
     //   ...restProps — additional HTML attributes spread onto the <tfoot>.
     //
     // Syntax:
     //   <GanttTableTfoot>
-    //     <GanttTableTR>
+    //     <GanttTableTr>
     //       <GanttTableTD>Total: 12 tasks</GanttTableTD>
-    //     </GanttTableTR>
+    //     </GanttTableTr>
     //   </GanttTableTfoot>
     //
     // Keyboard:
@@ -37,7 +37,7 @@
         children,
         ...restProps
     }: {
-        /** GanttTableTR elements with footer cells. */
+        /** GanttTableTr elements with footer cells. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    /** GanttTableTR elements with footer cells. */
+    /** GanttTableTr elements with footer cells. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/GanttTableThead/GanttTableThead.svelte

@@ -2,17 +2,17 @@
     // GanttTableHead component
     //
     // The header section of a GanttTable, rendered as a <thead> element.
-    // Contains GanttTableTR elements with column headers for task names,
+    // Contains GanttTableTr elements with column headers for task names,
     // dates, durations, or other Gantt chart metadata.
     //
     // Props:
     //   className — string, optional. CSS class name.
-    //   children — Snippet, required. GanttTableTR elements with header cells.
+    //   children — Snippet, required. GanttTableTr elements with header cells.
     //   ...restProps — additional HTML attributes spread onto the <thead>.
     //
     // Syntax:
     //   <GanttTableHead>
-    //     <GanttTableTR><th>Task</th><th>Start</th><th>End</th></GanttTableTR>
+    //     <GanttTableTr><th>Task</th><th>Start</th><th>End</th></GanttTableTr>
     //   </GanttTableHead>
     //
     // Keyboard:
@@ -36,7 +36,7 @@
         children,
         ...restProps
     }: {
-        /** GanttTableTR elements with header cells. */
+        /** GanttTableTr elements with header cells. */
         children: Snippet;
         [key: string]: unknown;
     } = $props();

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

@@ -1,6 +1,6 @@
 import type { Snippet } from "svelte";
 type $$ComponentProps = {
-    /** GanttTableTR elements with header cells. */
+    /** GanttTableTr elements with header cells. */
     children: Snippet;
     [key: string]: unknown;
 };

package/dist/components/GanttTableTr/GanttTableTr.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    // GanttTableTR component
+    // GanttTableTr component
     //
     // A single row within a GanttTable grid. Renders as a <tr> containing
     // GanttTableTD cells for each time period and task header cells.
@@ -11,25 +11,25 @@
     //   ...restProps — additional HTML attributes spread onto the <tr>.
     //
     // Syntax:
-    //   <GanttTableTR>
+    //   <GanttTableTr>
     //     <th>Design</th>
     //     <GanttTableTD active>---</GanttTableTD>
     //     <GanttTableTD />
-    //   </GanttTableTR>
+    //   </GanttTableTr>
     //
     // Examples:
     //   <!-- Task row with active time periods -->
-    //   <GanttTableTR>
+    //   <GanttTableTr>
     //     <th>Development</th>
     //     <GanttTableTD />
     //     <GanttTableTD active>---</GanttTableTD>
     //     <GanttTableTD active>---</GanttTableTD>
-    //   </GanttTableTR>
+    //   </GanttTableTr>
     //
     //   <!-- Header row with time period labels -->
-    //   <GanttTableTR>
+    //   <GanttTableTr>
     //     <th>Task</th><th>Week 1</th><th>Week 2</th><th>Week 3</th>
-    //   </GanttTableTR>
+    //   </GanttTableTr>
     //
     // Keyboard:
     //   None built-in — keyboard navigation is handled at the GanttTable grid level.
@@ -61,7 +61,7 @@
     } = $props();
 </script>
 
-<!-- GanttTableTR.svelte -->
+<!-- GanttTableTr.svelte -->
 <tr
     class={`gantt-table-tr ${className}`}
     {...restProps}

package/dist/components/GaugeChart/GaugeChart.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+    // GaugeChart component
+    //
+    // A headless chart container. The consumer supplies the inline svg as
+    // `children`; the component draws nothing. The graphic is a
+    // role="img" wrapper named by `label`. The optional `dataTable` snippet
+    // renders the accessible table alternative as a SIBLING of that image
+    // wrapper, never inside it: a role="img" element makes its descendants
+    // presentational, so a table placed inside would be invisible to
+    // assistive technology.
+    //
+    // Props:
+    //   class — string, optional. Consumer class appended after the base class.
+    //   label — string, required. Accessible name of the chart image.
+    //   children — Snippet. The consumer-supplied inline svg.
+    //   dataTable — Snippet, optional. The accessible table alternative.
+    //   ...restProps — spread onto the root <figure>.
+    //
+    // Markup:
+    //   <figure class="gauge-chart">
+    //     <div class="gauge-chart-graphic" role="img" aria-label>…svg…</div>
+    //     <div class="gauge-chart-data-table">…table…</div>   (only when provided)
+    //   </figure>
+    //
+    // Keyboard: none on the graphic; the data table follows native table behaviour.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no inline styles; no drawing.
+    //   - No hardcoded user-facing strings.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        dataTable,
+        ...restProps
+    }: {
+        /** Accessible name for the chart. */
+        label: string;
+        /** The consumer-supplied inline svg. */
+        children: Snippet;
+        /** Optional accessible data table alternative. */
+        dataTable?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GaugeChart.svelte -->
+<figure
+    class={`gauge-chart ${className}`}
+    {...restProps}
+>
+    <div class="gauge-chart-graphic" role="img" aria-label={label}>
+        {@render children?.()}
+    </div>
+    {#if dataTable}
+        <div class="gauge-chart-data-table">
+            {@render dataTable()}
+        </div>
+    {/if}
+</figure>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible name for the chart. */
+    label: string;
+    /** The consumer-supplied inline svg. */
+    children: Snippet;
+    /** Optional accessible data table alternative. */
+    dataTable?: Snippet;
+    [key: string]: unknown;
+};
+declare const GaugeChart: import("svelte").Component<$$ComponentProps, {}, "">;
+type GaugeChart = ReturnType<typeof GaugeChart>;
+export default GaugeChart;