@lilydesignsystem/svelte-headless 0.1.0

package/dist/components/GrailLayoutBottomFooter/GrailLayoutBottomFooter.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    // GrailLayoutBottomFooter component
+    //
+    // A headless container for the bottom footer section of a GrailLayout. It spans
+    // the full width of the layout and typically contains copyright, links, or
+    // site-wide footer content.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Content to render inside the bottom footer section.
+    //   ...restProps — additional HTML attributes spread onto the <footer>.
+    //
+    // Syntax:
+    //   <GrailLayoutBottomFooter>{children}</GrailLayoutBottomFooter>
+    //
+    // Examples:
+    //   <GrailLayoutBottomFooter><footer>Site Footer</footer></GrailLayoutBottomFooter>
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GrailLayoutBottomFooter.svelte -->
+<footer class={`grail-layout-bottom-footer ${className}`} {...restProps}>
+    {@render children?.()}
+</footer>

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

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

package/dist/components/GrailLayoutCenterMain/GrailLayoutCenterMain.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    // GrailLayoutCenterMain component
+    //
+    // A headless container for the center main content section of a GrailLayout. It
+    // holds the primary page content and is flanked by the left and right sidebars.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Content to render inside the center main section.
+    //   ...restProps — additional HTML attributes spread onto the <main>.
+    //
+    // Syntax:
+    //   <GrailLayoutCenterMain>{children}</GrailLayoutCenterMain>
+    //
+    // Examples:
+    //   <GrailLayoutCenterMain><main>Primary content</main></GrailLayoutCenterMain>
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GrailLayoutCenterMain.svelte -->
+<main class={`grail-layout-center-main ${className}`} {...restProps}>
+    {@render children?.()}
+</main>

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

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

package/dist/components/GrailLayoutLeftAside/GrailLayoutLeftAside.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    // GrailLayoutLeftAside component
+    //
+    // A headless container for the left aside section of a GrailLayout. It
+    // typically contains navigation menus, filters, or supplementary content.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Content to render inside the left aside.
+    //   ...restProps — additional HTML attributes spread onto the <aside>.
+    //
+    // Syntax:
+    //   <GrailLayoutLeftAside>{children}</GrailLayoutLeftAside>
+    //
+    // Examples:
+    //   <GrailLayoutLeftAside><nav>Navigation menu</nav></GrailLayoutLeftAside>
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GrailLayoutLeftAside.svelte -->
+<aside class={`grail-layout-left-aside ${className}`} {...restProps}>
+    {@render children?.()}
+</aside>

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

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

package/dist/components/GrailLayoutRightAside/GrailLayoutRightAside.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    // GrailLayoutRightAside component
+    //
+    // A headless container for the right aside section of a GrailLayout. It
+    // typically contains supplementary content, ads, related links, or contextual
+    // information.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Content to render inside the right aside.
+    //   ...restProps — additional HTML attributes spread onto the <aside>.
+    //
+    // Syntax:
+    //   <GrailLayoutRightAside>{children}</GrailLayoutRightAside>
+    //
+    // Examples:
+    //   <GrailLayoutRightAside><aside>Supplementary content</aside></GrailLayoutRightAside>
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GrailLayoutRightAside.svelte -->
+<aside class={`grail-layout-right-aside ${className}`} {...restProps}>
+    {@render children?.()}
+</aside>

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

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

package/dist/components/GrailLayoutTopHeader/GrailLayoutTopHeader.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    // GrailLayoutTopHeader component
+    //
+    // A headless container for the top header section of a GrailLayout. It spans
+    // the full width of the layout and typically contains site branding, navigation,
+    // or a top bar.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   children — Snippet, required. Content to render inside the top header section.
+    //   ...restProps — additional HTML attributes spread onto the <header>.
+    //
+    // Syntax:
+    //   <GrailLayoutTopHeader>{children}</GrailLayoutTopHeader>
+    //
+    // Examples:
+    //   <GrailLayoutTopHeader><header>Site Header</header></GrailLayoutTopHeader>
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: {
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- GrailLayoutTopHeader.svelte -->
+<header class={`grail-layout-top-header ${className}`} {...restProps}>
+    {@render children?.()}
+</header>

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

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

package/dist/components/GraphicBlock/GraphicBlock.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    // GraphicBlock component
+    //
+    // A wrapper for charts and graphics. Renders <figure role="img"> with
+    // aria-label so the whole graphic announces as a single image, and
+    // gathers title + description + notes inside a <figcaption> when any
+    // are provided.
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label,
+        title = undefined,
+        description = undefined,
+        notes = undefined,
+        children,
+        ...restProps
+    }: {
+        label: string;
+        title?: string;
+        description?: string;
+        notes?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    let hasCaption = $derived(
+        title !== undefined || description !== undefined || notes !== undefined
+    );
+</script>
+
+<!-- GraphicBlock.svelte -->
+<figure
+    class={`graphic-block ${className}`}
+    role="img"
+    aria-label={label}
+    {...restProps}
+>
+    {#if hasCaption}
+        <figcaption class="graphic-block-caption">
+            {#if title !== undefined}
+                <div class="graphic-block-title">{title}</div>
+            {/if}
+            {#if description !== undefined}
+                <div class="graphic-block-description">{description}</div>
+            {/if}
+            {#if notes !== undefined}
+                <div class="graphic-block-notes">{notes}</div>
+            {/if}
+        </figcaption>
+    {/if}
+    <div class="graphic-block-content">{@render children?.()}</div>
+</figure>

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

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

package/dist/components/Grid/Grid.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+    // Grid component
+    //
+    // A headless CSS grid layout container with configurable columns and gap.
+    // Renders a `<div>` with inline `display: grid` and a `grid-template-columns`
+    // built from a number (equal columns) or a custom CSS string.
+    //
+    // Props:
+    //   class — string, optional. CSS class appended to the base class.
+    //   columns — number | string, default 12. Number of equal columns OR custom grid-template-columns.
+    //   gap — string, default "1rem". Gap CSS value.
+    //   children — Snippet, required. Grid items.
+    //   ...restProps — additional HTML attributes spread onto the <div>.
+    //
+    // Syntax:
+    //   <Grid columns={3} gap="1rem">…</Grid>
+    //
+    // Examples:
+    //   <Grid columns="200px 1fr 200px" gap="1rem">
+    //     <aside>L</aside><main>M</main><aside>R</aside>
+    //   </Grid>
+    //
+    // Keyboard:
+    //   - None (purely structural)
+    //
+    // Accessibility:
+    //   - No ARIA role (presentational layout container)
+    //
+    // Internationalization:
+    //   - All text comes through children; no hardcoded strings
+    //
+    // Claude rules:
+    //   - Headless: only inline styles are grid behavior (display, template, gap)
+    //   - When columns is a number, uses repeat(N, minmax(0, 1fr))
+    //   - When columns is a string, uses it as-is
+    //
+    // References:
+    //   - MDN CSS Grid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        columns = 12,
+        gap = "1rem",
+        children,
+        ...restProps
+    }: {
+        /** Number of equal columns OR custom grid-template-columns string */
+        columns?: number | string;
+        /** Gap CSS value */
+        gap?: string;
+        /** Grid items */
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const templateColumns = $derived(
+        typeof columns === "number"
+            ? `repeat(${columns}, minmax(0, 1fr))`
+            : columns
+    );
+</script>
+
+<!-- Grid.svelte -->
+<div
+    class={`grid ${className}`}
+    data-columns={String(columns)}
+    style={`display: grid; grid-template-columns: ${templateColumns}; gap: ${gap};`}
+    {...restProps}
+>
+    {@render children?.()}
+</div>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    /** Number of equal columns OR custom grid-template-columns string */
+    columns?: number | string;
+    /** Gap CSS value */
+    gap?: string;
+    /** Grid items */
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Grid: import("svelte").Component<$$ComponentProps, {}, "">;
+type Grid = ReturnType<typeof Grid>;
+export default Grid;

package/dist/components/HamburgerMenu/HamburgerMenu.svelte

@@ -0,0 +1,105 @@
+<script lang="ts">
+    // HamburgerMenu component
+    //
+    // A hamburger menu toggle button that reveals or hides a navigation panel. Commonly
+    // used on mobile layouts and compact interfaces to conserve screen space by hiding
+    // the primary navigation behind a toggle control. Manages ARIA attributes linking the
+    // toggle button to the navigation panel via aria-controls and aria-expanded.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, default "Menu". Accessible name for the toggle button and navigation region.
+    //   open — boolean, default false. Bindable boolean controlling whether the navigation panel is visible.
+    //   children — Snippet, required. Navigation content rendered when the menu is open.
+    //   ...restProps — additional HTML attributes spread onto the outer div wrapper.
+    //
+    // Syntax:
+    //   <HamburgerMenu label="Main menu" bind:open>{children}</HamburgerMenu>
+    //
+    // Examples:
+    //   <!-- Basic hamburger menu with navigation links -->
+    //   <HamburgerMenu label="Main menu" bind:open>
+    //     <nav>
+    //       <ul>
+    //         <li><a href="/">Home</a></li>
+    //         <li><a href="/about">About</a></li>
+    //       </ul>
+    //     </nav>
+    //   </HamburgerMenu>
+    //
+    //   <!-- Hamburger menu with external open state -->
+    //   <HamburgerMenu bind:open={menuOpen}>
+    //     <ul>
+    //       <li><a href="/dashboard">Dashboard</a></li>
+    //       <li><a href="/settings">Settings</a></li>
+    //     </ul>
+    //   </HamburgerMenu>
+    //
+    // Keyboard:
+    //   - Enter: Toggles the menu open/closed when the button has focus
+    //   - Space: Toggles the menu open/closed when the button has focus
+    //   - Tab: Moves focus to/from the toggle button and into the navigation content when open
+    //
+    // Accessibility:
+    //   - aria-label on the button provides an accessible name for the toggle control
+    //   - aria-expanded on the button indicates whether the navigation panel is visible
+    //   - aria-controls on the button references the id of the navigation panel
+    //   - role="navigation" on the content container identifies it as a navigation landmark
+    //   - aria-label on the navigation container provides an accessible name for the landmark
+    //
+    // Internationalization:
+    //   - The label prop allows localized accessible names; default "Menu" should be overridden for non-English locales
+    //   - All content comes through the children snippet
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Uses $bindable() for two-way binding on the open prop
+    //   - Generates a unique menuId for aria-controls/id linking
+    //   - Navigation content is fully removed from DOM when closed via {#if open}
+    //
+    // References:
+    //   - WAI-ARIA Disclosure Pattern: https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/
+    //   - WAI-ARIA Navigation Landmark: https://www.w3.org/WAI/ARIA/apd/practices/landmark-regions/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = "Menu",
+        open = $bindable(false),
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        open?: boolean;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+
+    const uid = $props.id();
+    const menuId = `hamburger-${uid}`;
+</script>
+
+<!-- HamburgerMenu.svelte -->
+<div
+    class={`hamburger-menu ${className}`}
+    {...restProps}
+>
+    <button
+        type="button"
+        aria-label={label}
+        aria-expanded={open}
+        aria-controls={menuId}
+        onclick={() => (open = !open)}
+    >
+        {label}
+    </button>
+    {#if open}
+        <nav
+            id={menuId}
+            aria-label={label}
+        >
+            {@render children?.()}
+        </nav>
+    {/if}
+</div>

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

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

package/dist/components/Header/Header.svelte

@@ -0,0 +1,75 @@
+<script lang="ts">
+    // Header component
+    //
+    // A semantic page header landmark that renders a native <header> element for introductory
+    // or navigational content. Typically positioned at the top of a page or section, it contains
+    // elements like headings, navigation links, branding, search controls, or call-to-action
+    // buttons. The <header> element is automatically recognized by assistive technologies as
+    // the banner landmark role when it is a direct child of <body>.
+    //
+    // Props:
+    //   className — string, optional. CSS class name.
+    //   label — string, default undefined. Optional accessible name via aria-label, useful for distinguishing multiple headers.
+    //   children — Snippet, required. Content rendered inside the header element.
+    //   ...restProps — additional HTML attributes spread onto the header element.
+    //
+    // Syntax:
+    //   <Header label="Site header">{children}</Header>
+    //
+    // Examples:
+    //   <!-- Page header with heading -->
+    //   <Header label="Site header">
+    //     <h1>My Site</h1>
+    //   </Header>
+    //
+    //   <!-- Header with navigation -->
+    //   <Header>
+    //     <h1>Page Title</h1>
+    //     <nav>
+    //       <a href="/">Home</a>
+    //       <a href="/about">About</a>
+    //     </nav>
+    //   </Header>
+    //
+    // Keyboard:
+    //   - None — this is a passive container; keyboard interactions are determined by child elements
+    //
+    // Accessibility:
+    //   - The <header> element implicitly has role="banner" when a direct child of <body>
+    //   - aria-label optionally provides an accessible name to distinguish multiple headers on a page
+    //   - Screen reader users can navigate directly to the header via landmark navigation
+    //
+    // Internationalization:
+    //   - The label prop allows localized accessible names; no hardcoded user-facing strings
+    //   - All content comes through the children snippet
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+    //   - Uses semantic <header> element instead of div with role
+    //
+    // References:
+    //   - MDN header element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header
+    //   - WAI-ARIA Banner Landmark: https://www.w3.org/WAI/ARIA/apd/practices/landmark-regions/
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        label = undefined,
+        children,
+        ...restProps
+    }: {
+        label?: string;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Header.svelte -->
+<header
+    class={`header ${className}`}
+    aria-label={label}
+    {...restProps}
+>
+    {@render children?.()}
+</header>

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

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

package/dist/components/Headline/Headline.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    // Headline component
+    //
+    // A page or article headline composition: a heading at a configurable
+    // level (default <h1>), with optional `subtitle` and `byline` snippets
+    // rendered below it.
+    //
+    // Claude rules:
+    //   - Headless: no CSS, no styles — consumer provides all styling
+
+    import type { Snippet } from "svelte";
+
+    let {
+        class: className = "",
+        level = 1,
+        subtitle = undefined,
+        byline = undefined,
+        children,
+        ...restProps
+    }: {
+        level?: 1 | 2 | 3 | 4 | 5 | 6;
+        subtitle?: Snippet;
+        byline?: Snippet;
+        children: Snippet;
+        [key: string]: unknown;
+    } = $props();
+</script>
+
+<!-- Headline.svelte -->
+<div class={`headline ${className}`} {...restProps}>
+    {#if level === 1}
+        <h1 class="headline-heading">{@render children?.()}</h1>
+    {:else if level === 2}
+        <h2 class="headline-heading">{@render children?.()}</h2>
+    {:else if level === 3}
+        <h3 class="headline-heading">{@render children?.()}</h3>
+    {:else if level === 4}
+        <h4 class="headline-heading">{@render children?.()}</h4>
+    {:else if level === 5}
+        <h5 class="headline-heading">{@render children?.()}</h5>
+    {:else}
+        <h6 class="headline-heading">{@render children?.()}</h6>
+    {/if}
+    {#if subtitle}
+        <div class="headline-subtitle">{@render subtitle()}</div>
+    {/if}
+    {#if byline}
+        <div class="headline-byline">{@render byline()}</div>
+    {/if}
+</div>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    subtitle?: Snippet;
+    byline?: Snippet;
+    children: Snippet;
+    [key: string]: unknown;
+};
+declare const Headline: import("svelte").Component<$$ComponentProps, {}, "">;
+type Headline = ReturnType<typeof Headline>;
+export default Headline;