@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/GanttTableTfoot/GanttTableTfoot.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    // GanttTableTfoot component
+    //
+    // The footer section of a GanttTable, rendered as a <tfoot> element.
+    // Contains GanttTableTR elements with summary or aggregate data cells.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. GanttTableTR elements with footer cells.
+    //   ...restProps — additional HTML attributes spread onto the <tfoot>.
+    //
+    // Syntax:
+    //   <GanttTableTfoot>
+    //     <GanttTableTR>
+    //       <GanttTableTD>Total: 12 tasks</GanttTableTD>
+    //     </GanttTableTR>
+    //   </GanttTableTfoot>
+    //
+    // Keyboard:
+    //   None built-in — keyboard navigation handled at the GanttTable grid level.
+    //
+    // Accessibility:
+    //   - <tfoot> provides structural footer semantics for the table
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a GanttTable
+    //   - 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
+    }: {
+        /** GanttTableTR elements with footer cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTableTfoot.svelte -->
+<tfoot
+    class={`gantt-table-tfoot ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</tfoot>

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

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

package/dist/components/GanttTableThead/GanttTableThead.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    // GanttTableHead component
+    //
+    // The header section of a GanttTable, rendered as a <thead> element.
+    // 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.
+    //   ...restProps — additional HTML attributes spread onto the <thead>.
+    //
+    // Syntax:
+    //   <GanttTableHead>
+    //     <GanttTableTR><th>Task</th><th>Start</th><th>End</th></GanttTableTR>
+    //   </GanttTableHead>
+    //
+    // Keyboard:
+    //   None built-in — keyboard navigation handled at the GanttTable grid level.
+    //
+    // Accessibility:
+    //   - <thead> provides structural header semantics for the table
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a GanttTable
+    //   - 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
+    }: {
+        /** GanttTableTR elements with header cells. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTableHead.svelte -->
+<thead
+    class={`gantt-table-thead ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</thead>

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

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

package/dist/components/GanttTableTr/GanttTableTr.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+    // GanttTableTR component
+    //
+    // A single row within a GanttTable grid. Renders as a <tr> containing
+    // GanttTableTD cells for each time period and task header cells.
+    // Used inside GanttTableHead, GanttTableBody, or GanttTableTfoot.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. GanttTableTD cells and header cells for this row.
+    //   ...restProps — additional HTML attributes spread onto the <tr>.
+    //
+    // Syntax:
+    //   <GanttTableTR>
+    //     <th>Design</th>
+    //     <GanttTableTD active>---</GanttTableTD>
+    //     <GanttTableTD />
+    //   </GanttTableTR>
+    //
+    // Examples:
+    //   <!-- Task row with active time periods -->
+    //   <GanttTableTR>
+    //     <th>Development</th>
+    //     <GanttTableTD />
+    //     <GanttTableTD active>---</GanttTableTD>
+    //     <GanttTableTD active>---</GanttTableTD>
+    //   </GanttTableTR>
+    //
+    //   <!-- Header row with time period labels -->
+    //   <GanttTableTR>
+    //     <th>Task</th><th>Week 1</th><th>Week 2</th><th>Week 3</th>
+    //   </GanttTableTR>
+    //
+    // Keyboard:
+    //   None built-in — keyboard navigation is handled at the GanttTable grid level.
+    //
+    // Accessibility:
+    //   - <tr> has implicit role="row" within the grid (no explicit role needed)
+    //
+    // Internationalization:
+    //   - All cell content comes through children snippet; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Must be used inside a GanttTable component (which provides the <table>)
+    //   - No internal state — purely a structural wrapper
+    //
+    // References:
+    //   - WAI-ARIA Grid Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/grid/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** GanttTableTD cells and header cells for this row. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GanttTableTR.svelte -->
+<tr
+    class={`gantt-table-tr ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</tr>

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

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

package/dist/components/GoToNextSection/GoToNextSection.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    // GoToNextSection component
+    // A link that takes users to the next section of the current page.
+
+
+    let {
+        class: className = "",
+        label,
+        href,
+        ...restProps
+    }: {
+        label: string;
+        href: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GoToNextSection.svelte -->
+<a
+    class={`go-to-next-section ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>{label}</a>

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

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

package/dist/components/GoToPreviousSection/GoToPreviousSection.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    // GoToPreviousSection component
+    // A link that takes users to the previous section of the current page.
+
+
+    let {
+        class: className = "",
+        label,
+        href,
+        ...restProps
+    }: {
+        label: string;
+        href: string;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GoToPreviousSection.svelte -->
+<a
+    class={`go-to-previous-section ${className}`}
+    {href}
+    aria-label={label}
+    {...restProps}
+>{label}</a>

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

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

package/dist/components/GoToTop/GoToTop.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        href = "#top",
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        href?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GoToTop.svelte -->
+<a
+    class={`go-to-top ${className}`}
+
+
+    {href}
+    {...restProps}
+>
+    {@render children?.()}
+</a>

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

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

package/dist/components/GovernmentBanner/GovernmentBanner.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+    // GovernmentBanner component
+    //
+    // A headless `<aside>` identifying a website as belonging to a government.
+    // Includes an expandable details panel toggled by a button. Inspired by
+    // the USWDS Banner pattern. The banner is a complementary landmark and
+    // exposes `aria-expanded` plus `aria-controls` on the toggle, with a
+    // stable id wiring the button to the panel.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label naming the banner.
+    //   headerText — string, REQUIRED. Top headline text.
+    //   expandLabel — string, REQUIRED. Toggle button text.
+    //   expanded — boolean, default false. Whether the panel is open.
+    //   ontoggle — (next: boolean) => void, optional. Toggle handler.
+    //   panelId — string, optional. Stable id for the panel; auto-generated otherwise.
+    //   children — Snippet, optional. Details panel content.
+    //   ...restProps — additional HTML attributes spread onto the <aside>.
+    //
+    // Syntax:
+    //   <GovernmentBanner
+    //     label="Official government website"
+    //     headerText="An official website of the United States government"
+    //     expandLabel="Here's how you know"
+    //   >…</GovernmentBanner>
+    //
+    // Accessibility:
+    //   - <aside> is a complementary landmark
+    //   - Toggle button uses aria-expanded and aria-controls
+    //   - Panel is hidden with the boolean `hidden` attribute when collapsed
+    //
+    // Internationalization:
+    //   - All text is consumer-supplied via props
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - label, headerText, expandLabel are REQUIRED
+    //   - Stable panel id is generated when not supplied
+
+    import type { Snippet } from "svelte";
+
+    function makePanelId(): string {
+        try {
+            // Prefer crypto.randomUUID when available
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            const cryptoLocal = (globalThis as any).crypto;
+            if (cryptoLocal?.randomUUID) {
+                return `government-banner-panel-${cryptoLocal.randomUUID()}`;
+            }
+        } catch {
+            // ignore and fall through
+        }
+        return `government-banner-panel-${Math.random().toString(36).slice(2, 10)}`;
+    }
+
+    let {
+        class: className = "",
+        label,
+        headerText,
+        expandLabel,
+        expanded = false,
+        ontoggle = undefined,
+        panelId = makePanelId(),
+        children = undefined,
+        ...restProps
+    }: {
+        /** Optional CSS class appended to the base class */
+        class?: string;
+        /** Accessible label naming the banner (REQUIRED) */
+        label: string;
+        /** Top headline text (REQUIRED) */
+        headerText: string;
+        /** Toggle button text (REQUIRED) */
+        expandLabel: string;
+        /** Whether the panel is expanded */
+        expanded?: boolean;
+        /** Toggle handler invoked with the next expanded state */
+        ontoggle?: (next: boolean) => void;
+        /** Stable id for the details panel */
+        panelId?: string;
+        /** Optional details panel content */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    function handleToggle() {
+        const next = !expanded;
+        ontoggle?.(next);
+    }
+</script>
+
+<!-- GovernmentBanner.svelte -->
+<aside
+    class={`government-banner ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    <header class="government-banner-header">
+        <span class="government-banner-headline">{headerText}</span>
+        <button
+            type="button"
+            class="government-banner-toggle"
+            aria-expanded={expanded}
+            aria-controls={panelId}
+            onclick={handleToggle}
+        >
+            {expandLabel}
+        </button>
+    </header>
+    <div
+        class="government-banner-details"
+        id={panelId}
+        hidden={!expanded}
+    >
+        {#if children}
+            {@render children?.()}
+        {/if}
+    </div>
+</aside>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Optional CSS class appended to the base class */
+    class?: string;
+    /** Accessible label naming the banner (REQUIRED) */
+    label: string;
+    /** Top headline text (REQUIRED) */
+    headerText: string;
+    /** Toggle button text (REQUIRED) */
+    expandLabel: string;
+    /** Whether the panel is expanded */
+    expanded?: boolean;
+    /** Toggle handler invoked with the next expanded state */
+    ontoggle?: (next: boolean) => void;
+    /** Stable id for the details panel */
+    panelId?: string;
+    /** Optional details panel content */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const GovernmentBanner: import("svelte").Component<$$ComponentProps, {}, "">;
+type GovernmentBanner = ReturnType<typeof GovernmentBanner>;
+export default GovernmentBanner;

package/dist/components/GovernmentIdentifier/GovernmentIdentifier.svelte

@@ -0,0 +1,98 @@
+<script lang="ts">
+    // GovernmentIdentifier component
+    //
+    // A headless `<section>` that identifies the parent agency of a government
+    // website, including optional logo, the REQUIRED agency name, optional
+    // description, and a nested `<nav>` for required links provided as
+    // children. Inspired by the USWDS Identifier component.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   label — string, REQUIRED. aria-label naming the section.
+    //   agencyName — string, REQUIRED. Parent agency name.
+    //   agencyHref — string, optional. When provided, agency name links to it.
+    //   logoUrl — string, optional. Agency logo src.
+    //   logoAlt — string, optional. Agency logo alt text.
+    //   description — string, optional. Agency description.
+    //   children — Snippet, optional. Required-links nav content.
+    //   ...restProps — additional HTML attributes spread onto the <section>.
+    //
+    // Accessibility:
+    //   - <section> with aria-label is a labelled landmark
+    //   - Nested <nav> with aria-label names the required-links navigation
+    //   - Logo image alt text is consumer-supplied
+    //
+    // Internationalization:
+    //   - All text comes through props
+    //
+    // Claude rules:
+    //   - Headless: no styles
+    //   - label and agencyName are REQUIRED
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        agencyName,
+        agencyHref = undefined,
+        logoUrl = undefined,
+        logoAlt = "",
+        description = undefined,
+        children = undefined,
+        ...restProps
+    }: {
+        /** Optional CSS class appended to the base class */
+        class?: string;
+        /** Section aria-label (REQUIRED) */
+        label: string;
+        /** Parent agency name (REQUIRED) */
+        agencyName: string;
+        /** Optional href for the agency name */
+        agencyHref?: string;
+        /** Optional agency logo src */
+        logoUrl?: string;
+        /** Optional agency logo alt text */
+        logoAlt?: string;
+        /** Optional agency description text */
+        description?: string;
+        /** Optional required-links nav content */
+        children?: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GovernmentIdentifier.svelte -->
+<section
+    class={`government-identifier ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    <div class="government-identifier-masthead">
+        {#if logoUrl}
+            <img
+                class="government-identifier-logo"
+                src={logoUrl}
+                alt={logoAlt}
+            />
+        {/if}
+        <p class="government-identifier-agency">
+            {#if agencyHref}
+                <a href={agencyHref}>{agencyName}</a>
+            {:else}
+                <span>{agencyName}</span>
+            {/if}
+        </p>
+        {#if description}
+            <p class="government-identifier-description">{description}</p>
+        {/if}
+    </div>
+    {#if children}
+        <nav
+            class="government-identifier-links"
+            aria-label={label}
+        >
+            {@render children?.()}
+        </nav>
+    {/if}
+</section>

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

@@ -0,0 +1,23 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Optional CSS class appended to the base class */
+    class?: string;
+    /** Section aria-label (REQUIRED) */
+    label: string;
+    /** Parent agency name (REQUIRED) */
+    agencyName: string;
+    /** Optional href for the agency name */
+    agencyHref?: string;
+    /** Optional agency logo src */
+    logoUrl?: string;
+    /** Optional agency logo alt text */
+    logoAlt?: string;
+    /** Optional agency description text */
+    description?: string;
+    /** Optional required-links nav content */
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const GovernmentIdentifier: import("svelte").Component<$$ComponentProps, {}, "">;
+type GovernmentIdentifier = ReturnType<typeof GovernmentIdentifier>;
+export default GovernmentIdentifier;

package/dist/components/GrailLayout/GrailLayout.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">
+    // GrailLayout component
+    //
+    // A headless container that provides the classic "holy grail" web design structure
+    // with five sections: a full-width top header, a left sidebar, a center content
+    // area, a right sidebar, and a full-width bottom footer. Renders a <div> with no
+    // layout styles, allowing consumers to apply CSS Grid, Flexbox, or any layout system.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Layout section elements to render.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <GrailLayout>{children}</GrailLayout>
+    //
+    // Examples:
+    //   <GrailLayout>
+    //     <GrailLayoutTop>Header</GrailLayoutTop>
+    //     <GrailLayoutLeft>Left sidebar</GrailLayoutLeft>
+    //     <GrailLayoutCenter>Main content</GrailLayoutCenter>
+    //     <GrailLayoutRight>Right sidebar</GrailLayoutRight>
+    //     <GrailLayoutBottom>Footer</GrailLayoutBottom>
+    //   </GrailLayout>
+    //
+    // Keyboard:
+    //   - None. Structural layout component with no interactive behavior.
+    //
+    // Accessibility:
+    //   - No explicit ARIA attributes; consumers use semantic landmarks within sections
+    //
+    // Internationalization:
+    //   - No hardcoded user-facing strings
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - No layout styles applied; consumer provides CSS Grid or Flexbox
+    //
+    // References:
+    //   - CSS Grid Layout: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        /** Layout section elements. */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GrailLayout.svelte -->
+<div
+    class={`grail-layout ${className}`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

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