@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/TabBarButton/TabBarButton.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+    // TabBarButton component
+    //
+    // A headless tab button for use within a tabbed interface. Renders a <button>
+    // with role="tab" and appropriate ARIA attributes for tab selection and panel
+    // association. It follows the roving tabindex pattern where only the selected
+    // tab participates in the tab order. Designed to be placed inside a TabBar
+    // container with role="tablist".
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   selected — boolean, default false. Whether this tab is currently active.
+    //   controls — string, required. The id of the associated tabpanel element.
+    //   children — Snippet, required. Tab label content.
+    //   ...restProps — additional HTML attributes spread onto the <button>.
+    //
+    // Syntax:
+    //   <TabBarButton selected={true} controls="panel-1">Label</TabBarButton>
+    //
+    // Examples:
+    //   <!-- Tab buttons within a TabBar -->
+    //   <TabBar label="Settings">
+    //     <TabBarButton selected={activeTab === "general"} controls="panel-general"
+    //       onclick={() => activeTab = "general"}>General</TabBarButton>
+    //     <TabBarButton selected={activeTab === "advanced"} controls="panel-advanced"
+    //       onclick={() => activeTab = "advanced"}>Advanced</TabBarButton>
+    //   </TabBar>
+    //
+    // Keyboard:
+    //   - Tab: moves focus to the selected tab in the tablist
+    //   - ArrowLeft/ArrowRight: moves between tabs (handled by parent tablist)
+    //   - Enter/Space: activates the tab (native button behavior)
+    //
+    // Accessibility:
+    //   - role="tab" identifies this element as a tab in a tabbed interface
+    //   - aria-selected communicates the selection state to screen readers
+    //   - aria-controls links the tab to its panel for assistive technology
+    //   - Roving tabindex: selected tab has tabindex=0, others have tabindex=-1
+    //   - Compound component: must be placed inside a TabBar container
+    //
+    // Internationalization:
+    //   - All visible text is provided through the children snippet
+    //   - No hardcoded strings in the component
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - Compound component: must be used inside a TabBar container
+    //   - Consumers manage selection state and panel visibility
+    //
+    // References:
+    //   - WAI-ARIA Tabs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+    //   - WAI-ARIA Tab Role: https://www.w3.org/TR/wai-aria-1.2/#tab
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        selected = false,
+        controls,
+        children,
+        ...restProps
+    }: {
+        /** Whether this tab is currently active */
+        selected?: boolean;
+        /** The id of the associated tabpanel element */
+        controls: string;
+        /** Tab label content */
+        children: Snippet;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TabBarButton.svelte -->
+<button
+    class={`tab-bar-button ${className}`}
+    role="tab"
+    aria-selected={selected}
+    aria-controls={controls}
+    tabindex={selected ? 0 : -1}
+    {...restProps}
+>
+    {@render children?.()}
+</button>

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

@@ -0,0 +1,14 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Whether this tab is currently active */
+    selected?: boolean;
+    /** The id of the associated tabpanel element */
+    controls: string;
+    /** Tab label content */
+    children: Snippet;
+    /** Additional HTML attributes */
+    [key: string]: unknown;
+};
+declare const TabBarButton: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabBarButton = ReturnType<typeof TabBarButton>;
+export default TabBarButton;

package/dist/components/TabPanel/TabPanel.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    // TabPanel component
+    //
+    // A content panel associated with a tab in a tab bar. Renders a `<div>`
+    // with `role="tabpanel"`. When `labelledBy` is provided, the panel uses
+    // `aria-labelledby` to point at the controlling tab; otherwise it falls
+    // back to the required `label` prop as `aria-label`. The panel is hidden
+    // (via the native `hidden` attribute) when not selected and is focusable
+    // via `tabindex="0"` so keyboard users can scroll the content.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label fallback when labelledBy is absent.
+    //   labelledBy — string, optional. ID of the controlling tab button.
+    //   selected — boolean, default false. Whether the panel is selected.
+    //   children — Snippet, optional. Panel content.
+    //
+    // Syntax:
+    //   <TabPanel label="Details" labelledBy="tab-details" selected={current === "details"}>
+    //       …
+    //   </TabPanel>
+    //
+    // Accessibility:
+    //   - role="tabpanel"
+    //   - aria-labelledby links to the controlling tab when provided
+    //   - tabindex="0" makes the panel focusable for keyboard users
+    //
+    // Internationalization:
+    //   - Label provided via props
+    //
+    // References:
+    //   - WAI-ARIA Tabs Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        labelledBy = undefined,
+        selected = false,
+        children = undefined,
+        ...restProps
+    }: {
+        class?: string;
+        /** Accessible label fallback (REQUIRED) */
+        label: string;
+        /** ID of the controlling tab button */
+        labelledBy?: string;
+        /** Whether the panel is selected */
+        selected?: boolean;
+        /** Panel content */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TabPanel.svelte -->
+<div
+    class={`tab-panel ${className}`}
+    role="tabpanel"
+    aria-label={labelledBy ? undefined : label}
+    aria-labelledby={labelledBy}
+    hidden={!selected}
+    tabindex="0"
+    {...restProps}
+>
+    {#if children}
+        {@render children?.()}
+    {/if}
+</div>

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

@@ -0,0 +1,16 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    class?: string;
+    /** Accessible label fallback (REQUIRED) */
+    label: string;
+    /** ID of the controlling tab button */
+    labelledBy?: string;
+    /** Whether the panel is selected */
+    selected?: boolean;
+    /** Panel content */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const TabPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type TabPanel = ReturnType<typeof TabPanel>;
+export default TabPanel;

package/dist/components/Table/Table.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    // Table component
+    //
+    // A headless table that renders a semantic <table> element with an accessible
+    // label. Used to display structured data in rows and columns for reports,
+    // schedules, product lists, and dashboards. The consumer provides all table
+    // content (thead, tbody, tfoot, caption, colgroup, etc.) through the children
+    // snippet, maintaining full control over table structure and styling.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, required. Accessible label for the table via aria-label.
+    //   children — Snippet, required. Table content including thead, tbody, tfoot, etc.
+    //   ...restProps — additional HTML attributes spread onto the <table>.
+    //
+    // Syntax:
+    //   <Table label="User accounts">...</Table>
+    //
+    // Examples:
+    //   <!-- Data table with column headers -->
+    //   <Table label="User accounts">
+    //     <thead><tr><th scope="col">Name</th><th scope="col">Email</th></tr></thead>
+    //     <tbody><tr><td>Alice</td><td>alice@example.com</td></tr></tbody>
+    //   </Table>
+    //
+    // Keyboard:
+    //   - None directly -- standard table navigation is handled by screen readers
+    //
+    // Accessibility:
+    //   - aria-label provides the accessible name for screen readers
+    //   - Semantic <table> element conveys tabular data structure
+    //   - Consumers should use <th scope="col"> for column headers
+    //   - Consumers should use <th scope="row"> for row headers
+    //   - Consumers may add <caption> for a visible table title
+    //
+    // Internationalization:
+    //   - The label prop externalizes user-facing text for translation
+    //   - All content is provided through the children snippet
+    //   - No hardcoded strings in the component
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles -- consumer provides all styling
+    //   - No built-in sorting, filtering, or pagination
+    //
+    // References:
+    //   - WAI-ARIA Table Role: https://www.w3.org/WAI/ARIA/apg/patterns/table/
+    //   - HTML Table Element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        children,
+        ...restProps
+    }: {
+        /** Accessible label for the table */
+        label: string;
+        /** Table content (thead, tbody, tfoot, caption, colgroup, etc.) */
+        children: Snippet;
+        /** Additional HTML attributes */
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Table: a semantic table element with accessible labeling -->
+<table
+    class={`table ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</table>

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

@@ -0,0 +1,12 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Accessible label for the table */
+    label: string;
+    /** Table content (thead, tbody, tfoot, caption, colgroup, etc.) */
+    children: Snippet;
+    /** Additional HTML attributes */
+    [key: string]: unknown;
+};
+declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/components/TableBody/TableBody.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // TableBody component
+    //
+    // The body section of a Table, rendered as a <tbody> element.
+    // Contains TableRow elements with data cells.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. TableRow elements with data cells.
+    //   ...restProps — additional HTML attributes spread onto the <tbody>.
+    //
+    // Syntax:
+    //   <TableBody>...</TableBody>
+    //
+    // Keyboard:
+    //   None — tables are non-interactive structural wrappers.
+    //
+    // Accessibility:
+    //   - <tbody> provides native table-section semantics
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a Table
+    //   - No internal state — purely a structural wrapper
+    //
+    // References:
+    //   - HTML tbody element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** TableRow elements with data cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TableBody.svelte -->
+<tbody
+    class={`table-body ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</tbody>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** TableRow elements with data cells. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const TableBody: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableBody = ReturnType<typeof TableBody>;
+export default TableBody;

package/dist/components/TableFoot/TableFoot.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // TableFoot component
+    //
+    // The footer section of a Table, rendered as a <tfoot> element.
+    // Contains TableRow elements with footer/summary cells.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. TableRow elements with footer/summary cells.
+    //   ...restProps — additional HTML attributes spread onto the <tfoot>.
+    //
+    // Syntax:
+    //   <TableFoot>...</TableFoot>
+    //
+    // Keyboard:
+    //   None — tables are non-interactive structural wrappers.
+    //
+    // Accessibility:
+    //   - <tfoot> provides native table-section semantics
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a Table
+    //   - No internal state — purely a structural wrapper
+    //
+    // References:
+    //   - HTML tfoot element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** TableRow elements with footer/summary cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TableFoot.svelte -->
+<tfoot
+    class={`table-foot ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</tfoot>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** TableRow elements with footer/summary cells. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const TableFoot: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableFoot = ReturnType<typeof TableFoot>;
+export default TableFoot;

package/dist/components/TableHead/TableHead.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // TableHead component
+    //
+    // The header section of a Table, rendered as a <thead> element.
+    // Contains TableRow elements with header cells.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. TableRow elements with header cells.
+    //   ...restProps — additional HTML attributes spread onto the <thead>.
+    //
+    // Syntax:
+    //   <TableHead>...</TableHead>
+    //
+    // Keyboard:
+    //   None — tables are non-interactive structural wrappers.
+    //
+    // Accessibility:
+    //   - <thead> provides native table-section semantics
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a Table
+    //   - No internal state — purely a structural wrapper
+    //
+    // References:
+    //   - HTML thead element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** TableRow elements with header cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TableHead.svelte -->
+<thead
+    class={`table-head ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</thead>

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

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** TableRow elements with header cells. */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const TableHead: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableHead = ReturnType<typeof TableHead>;
+export default TableHead;

package/dist/components/TableRow/TableRow.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // TableRow component
+    //
+    // A single row in a Table, rendered as a <tr> element.
+    // Contains TableTH or TableTD cells.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. TableTH or TableTD cells.
+    //   ...restProps — additional HTML attributes spread onto the <tr>.
+    //
+    // Syntax:
+    //   <TableRow>...</TableRow>
+    //
+    // Keyboard:
+    //   None — tables are non-interactive structural wrappers.
+    //
+    // Accessibility:
+    //   - <tr> provides native table-section semantics
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a Table
+    //   - No internal state — purely a structural wrapper
+    //
+    // References:
+    //   - HTML tr element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** TableTH or TableTD cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TableRow.svelte -->
+<tr
+    class={`table-row ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</tr>

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

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

package/dist/components/TableTD/TableTD.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+    // TableTD component
+    //
+    // A data cell within a Table, rendered as a <td> element. Used inside a
+    // <TableRow> within <TableBody> or <TableFoot> to hold one cell of data.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   colSpan — number, optional. Number of columns this cell spans.
+    //   rowSpan — number, optional. Number of rows this cell spans.
+    //   children — Snippet, optional. Cell content.
+    //   ...restProps — additional HTML attributes spread onto the <td>.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a <tr> within a Table
+    //
+    // References:
+    //   - HTML td element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        colSpan = undefined,
+        rowSpan = undefined,
+        children,
+        ...restProps
+    }: {
+        /** Number of columns this cell spans. */
+        colSpan?: number;
+        /** Number of rows this cell spans. */
+        rowSpan?: number;
+        /** Cell content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TableTD.svelte -->
+<td
+    class={`table-td ${className}`}
+    colspan={colSpan || undefined}
+    rowspan={rowSpan || undefined}
+    {...restProps}
+>
+    {@render children?.()}
+</td>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Number of columns this cell spans. */
+    colSpan?: number;
+    /** Number of rows this cell spans. */
+    rowSpan?: number;
+    /** Cell content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const TableTD: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableTD = ReturnType<typeof TableTD>;
+export default TableTD;

package/dist/components/TableTH/TableTH.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+    // TableTH component
+    //
+    // A header cell within a Table, rendered as a <th> element. Used inside
+    // a <TableRow> within <TableHead> to label columns, or with scope="row"
+    // to label a row.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   colSpan — number, optional. Number of columns this header cell spans.
+    //   rowSpan — number, optional. Number of rows this header cell spans.
+    //   scope — "col" | "row" | "colgroup" | "rowgroup", default "col". Header scope.
+    //   children — Snippet, optional. Header cell content.
+    //   ...restProps — additional HTML attributes spread onto the <th>.
+    //
+    // Accessibility:
+    //   - <th scope="col"> associates the header with its column
+    //   - <th scope="row"> associates the header with its row
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a <tr> within a Table
+    //
+    // References:
+    //   - HTML th element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        colSpan = undefined,
+        rowSpan = undefined,
+        scope = "col",
+        children,
+        ...restProps
+    }: {
+        /** Number of columns this header cell spans. */
+        colSpan?: number;
+        /** Number of rows this header cell spans. */
+        rowSpan?: number;
+        /** Header scope. */
+        scope?: "col" | "row" | "colgroup" | "rowgroup";
+        /** Header cell content. */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- TableTH.svelte -->
+<th
+    class={`table-th ${className}`}
+    {scope}
+    colspan={colSpan || undefined}
+    rowspan={rowSpan || undefined}
+    {...restProps}
+>
+    {@render children?.()}
+</th>

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

@@ -0,0 +1,15 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Number of columns this header cell spans. */
+    colSpan?: number;
+    /** Number of rows this header cell spans. */
+    rowSpan?: number;
+    /** Header scope. */
+    scope?: "col" | "row" | "colgroup" | "rowgroup";
+    /** Header cell content. */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const TableTH: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableTH = ReturnType<typeof TableTH>;
+export default TableTH;