@dxlbnl/ui 0.1.0

package/dist/components/layout/Rule.stories.svelte

@@ -0,0 +1,80 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Rule from "./Rule.svelte";
+  import Stack from "./Stack.svelte";
+  import { resolveTokenFgColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Layout/Rule",
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="All Variants"
+  play={async ({ canvasElement }) => {
+    const hrs = canvasElement.querySelectorAll("hr");
+    await expect(hrs.length).toBe(3);
+
+    const [solid, dashed, strong] = Array.from(hrs) as HTMLElement[];
+
+    // Solid variant
+    const solidStyle = getComputedStyle(solid);
+    await expect(solidStyle.borderTopStyle).toBe("solid");
+    await expect(solidStyle.borderTopWidth).toBe("1px");
+    const ruleColor = resolveTokenFgColor("--rule");
+    await expect(solidStyle.borderTopColor).toBe(ruleColor);
+
+    // Dashed variant
+    const dashedStyle = getComputedStyle(dashed);
+    await expect(dashedStyle.borderTopStyle).toBe("dashed");
+    await expect(dashedStyle.borderTopWidth).toBe("1px");
+    await expect(dashedStyle.borderTopColor).toBe(ruleColor);
+
+    // Strong variant — same style but different color from solid
+    const strongStyle = getComputedStyle(strong);
+    await expect(strongStyle.borderTopStyle).toBe("solid");
+    const ruleStrongColor = resolveTokenFgColor("--rule-strong");
+    await expect(strongStyle.borderTopColor).toBe(ruleStrongColor);
+    await expect(strongStyle.borderTopColor).not.toBe(ruleColor);
+  }}>
+  <Stack gap="md">
+    <span>Solid (default)</span>
+    <Rule variant="solid" />
+    <span>Dashed</span>
+    <Rule variant="dashed" />
+    <span>Strong</span>
+    <Rule variant="strong" />
+  </Stack>
+</Story>
+
+<Story name="In Context"
+  play={async ({ canvasElement }) => {
+    const hr = within(canvasElement).getAllByRole("separator")[0];
+    await expect(hr).toBeVisible();
+    const style = getComputedStyle(hr);
+    await expect(style.marginTop).toBe("0px");
+    await expect(style.marginBottom).toBe("0px");
+    await expect(style.marginLeft).toBe("0px");
+    await expect(style.marginRight).toBe("0px");
+    // aria-hidden forwarded via ...rest
+    const hiddenHr = canvasElement.querySelector("[data-testid='rule-hidden']") as HTMLElement;
+    await expect(hiddenHr.getAttribute("aria-hidden")).toBe("true");
+  }}>
+  <Stack gap="md">
+    <h3>Section Heading</h3>
+    <Rule />
+    <p>Body text below the rule. The rule carries no margin of its own — spacing comes from the Stack gap.</p>
+    <Rule aria-hidden="true" data-testid="rule-hidden" />
+  </Stack>
+</Story>
+
+<Story name="With Margin Override"
+  play={async ({ canvasElement }) => {
+    const hr = canvasElement.querySelector("hr")!;
+    const style = getComputedStyle(hr);
+    await expect(style.marginTop).toBe("24px");
+    await expect(style.marginBottom).toBe("24px");
+  }}>
+  <Rule style="margin-top: 24px; margin-bottom: 24px" />
+</Story>

package/dist/components/layout/Rule.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Rule from "./Rule.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Rule: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Rule = InstanceType<typeof Rule>;
+export default Rule;

package/dist/components/layout/Rule.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  type RuleVariant = 'solid' | 'dashed' | 'strong'
+
+  interface Props extends HTMLAttributes<HTMLHRElement> {
+    variant?: RuleVariant
+    [key: string]: unknown
+  }
+
+  let { variant = 'solid', ...rest }: Props = $props()
+</script>
+
+<hr class="rule" data-variant={variant} {...rest} />
+
+<style>
+  .rule {
+    border: none;
+    margin: 0;
+  }
+
+  .rule[data-variant="solid"] {
+    border-top: 1px solid var(--rule);
+  }
+
+  .rule[data-variant="dashed"] {
+    border-top: 1px dashed var(--rule);
+  }
+
+  .rule[data-variant="strong"] {
+    border-top: 1px solid var(--rule-strong);
+  }
+</style>

package/dist/components/layout/Rule.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type RuleVariant = 'solid' | 'dashed' | 'strong';
+interface Props extends HTMLAttributes<HTMLHRElement> {
+    variant?: RuleVariant;
+    [key: string]: unknown;
+}
+declare const Rule: import("svelte").Component<Props, {}, "">;
+type Rule = ReturnType<typeof Rule>;
+export default Rule;

package/dist/components/layout/Spread.stories.svelte

@@ -0,0 +1,118 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Spread from "./Spread.svelte";
+  import Button from "../primitives/Button.svelte";
+  import Led from "../primitives/Led.svelte";
+  import TagPill from "../primitives/TagPill.svelte";
+
+  const { Story } = defineMeta({
+    title: "Layout/Spread",
+    component: Spread,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Section Header" args={{ "aria-label": "test-label" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("flex");
+    await expect(style.justifyContent).toBe("space-between");
+    // aria-label forwarded via ...rest
+    await expect(root.getAttribute("aria-label")).toBe("test-label");
+  }}>
+  <span class="mono-label">System Status</span>
+  <Button variant="ghost">View All →</Button>
+</Story>
+
+<Story name="Led Status Bar"
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const style = getComputedStyle(root);
+    await expect(style.justifyContent).toBe("space-between");
+    // After B25: bare <Spread> with no gap prop defaults to none → 0px
+    const gap = style.gap || style.columnGap;
+    await expect(gap === "0px" || gap === "0").toBe(true);
+  }}>
+  <span style="display: flex; align-items: center; gap: 8px;">
+    <Led color="ok" aria-label="Status: ok" />
+    <span>All systems nominal</span>
+  </span>
+  <TagPill variant="amber">Live</TagPill>
+</Story>
+
+<Story name="With Gap"
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(getComputedStyle(root).display).toBe("flex");
+    await expect(getComputedStyle(root).justifyContent).toBe("space-between");
+    // After B25: bare <Spread> with no gap prop defaults to none → 0px
+    const gap = getComputedStyle(root).gap || getComputedStyle(root).columnGap;
+    await expect(gap === "0px" || gap === "0").toBe(true);
+  }}>
+  <span class="mono-label">Left Item</span>
+  <span class="mono-label">Center Item</span>
+  <span class="mono-label">Right Item</span>
+</Story>
+
+<Story name="Vertical Stack" args={{ as: "section", "aria-label": "stack-region" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild!;
+    await expect(root.tagName).toBe("SECTION");
+    await expect(getComputedStyle(root).display).toBe("flex");
+    await expect(root.getAttribute("aria-label")).toBe("stack-region");
+  }}>
+  <span>Item A</span>
+  <span>Item B</span>
+</Story>
+
+<!-- AC-2 / AC-3: default gap (no prop) and explicit gap="none" both resolve to 0px -->
+<Story name="Gap None" args={{ gap: "none" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const gap = getComputedStyle(root).gap || getComputedStyle(root).columnGap;
+    await expect(gap === "0px" || gap === "0").toBe(true);
+  }}>
+  <span>Left</span>
+  <span>Right</span>
+</Story>
+
+<!-- AC-5: gap="sm" → var(--u2) → 16px -->
+<Story name="Gap Sm" args={{ gap: "sm" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const gap = getComputedStyle(root).gap || getComputedStyle(root).columnGap;
+    await expect(gap.includes("16px")).toBe(true);
+  }}>
+  <span>Left</span>
+  <span>Right</span>
+</Story>
+
+<!-- AC-6: gap="md" → var(--u3) → 24px -->
+<Story name="Gap Md" args={{ gap: "md" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const gap = getComputedStyle(root).gap || getComputedStyle(root).columnGap;
+    await expect(gap.includes("24px")).toBe(true);
+  }}>
+  <span>Left</span>
+  <span>Right</span>
+</Story>
+
+<!-- AC-7: gap="lg" → var(--u4) → 32px -->
+<Story name="Gap Lg" args={{ gap: "lg" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const gap = getComputedStyle(root).gap || getComputedStyle(root).columnGap;
+    await expect(gap.includes("32px")).toBe(true);
+  }}>
+  <span>Left</span>
+  <span>Right</span>
+</Story>

package/dist/components/layout/Spread.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Spread from "./Spread.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Spread: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Spread = InstanceType<typeof Spread>;
+export default Spread;

package/dist/components/layout/Spread.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string
+    /** Space between children. @default 'none' */
+    gap?: GapSize
+    children?: Snippet
+    class?: ClassValue | null
+    style?: string | null
+    [key: string]: unknown
+  }
+
+  let { as = 'div', gap = 'none', children, class: klass = '', ...rest }: Props = $props()
+</script>
+
+<svelte:element this={as} class={['spread', klass]} data-gap={gap} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .spread {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .spread[data-gap="none"] { gap: 0; }
+  .spread[data-gap="xs"]   { gap: var(--u); }
+  .spread[data-gap="sm"]   { gap: var(--u2); }
+  .spread[data-gap="md"]   { gap: var(--u3); }
+  .spread[data-gap="lg"]   { gap: var(--u4); }
+  .spread[data-gap="xl"]   { gap: var(--u5); }
+</style>

package/dist/components/layout/Spread.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string;
+    /** Space between children. @default 'none' */
+    gap?: GapSize;
+    children?: Snippet;
+    class?: ClassValue | null;
+    style?: string | null;
+    [key: string]: unknown;
+}
+declare const Spread: import("svelte").Component<Props, {}, "">;
+type Spread = ReturnType<typeof Spread>;
+export default Spread;

package/dist/components/layout/Stack.stories.svelte

@@ -0,0 +1,90 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Stack from "./Stack.svelte";
+  import Button from "../primitives/Button.svelte";
+  import TagPill from "../primitives/TagPill.svelte";
+
+  const { Story } = defineMeta({
+    title: "Layout/Stack",
+    component: Stack,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Default Stack" args={{ gap: "sm", "aria-label": "test-label" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root).toBeVisible();
+    const style = getComputedStyle(root);
+    await expect(style.display).toBe("flex");
+    await expect(style.flexDirection).toBe("column");
+    // gap="sm" → var(--u2) → 16px
+    const gap = style.gap || style.columnGap;
+    await expect(gap.includes("16px")).toBe(true);
+    // aria-label forwarded via ...rest
+    await expect(root.getAttribute("aria-label")).toBe("test-label");
+  }}>
+  <Button variant="ghost">View All Hardware →</Button>
+  <Button variant="ghost">View Projects →</Button>
+  <Button variant="ghost">Read the Docs →</Button>
+</Story>
+
+<Story name="Large Gap" args={{ gap: "lg" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.rowGap;
+    await expect(gap.includes("32px")).toBe(true);
+  }}>
+  <TagPill variant="amber">Featured</TagPill>
+  <TagPill>Utility</TagPill>
+</Story>
+
+<Story name="Small Gap" args={{ gap: "xs" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.rowGap;
+    await expect(gap.includes("8px")).toBe(true);
+  }}>
+  <span>Item 1</span>
+  <span>Item 2</span>
+  <span>Item 3</span>
+  <span>Item 4</span>
+</Story>
+
+<Story name="As Section" args={{ as: "section", gap: "md" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root.tagName).toBe("SECTION");
+    // AC-16 / AC-9: gap="md" → var(--u3) → 24px (fixed from erroneous 16px)
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.rowGap;
+    await expect(gap.includes("24px")).toBe(true);
+  }}>
+  <h2>Section Title</h2>
+  <p>Section content paragraph text goes here.</p>
+</Story>
+
+<Story name="None Gap" args={{ gap: "none" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.rowGap;
+    await expect(gap === "0px" || gap === "0").toBe(true);
+  }}>
+  <Button variant="ghost">A</Button>
+  <Button variant="ghost">B</Button>
+</Story>
+
+<Story name="XL Gap" args={{ gap: "xl" }}
+  play={async ({ canvasElement }) => {
+    const root = canvasElement.firstElementChild as HTMLElement;
+    const style = getComputedStyle(root);
+    const gap = style.gap || style.rowGap;
+    await expect(gap.includes("40px")).toBe(true);
+  }}>
+  <Button variant="ghost">Top</Button>
+  <Button variant="ghost">Bottom</Button>
+</Story>

package/dist/components/layout/Stack.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Stack from "./Stack.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Stack: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Stack = InstanceType<typeof Stack>;
+export default Stack;

package/dist/components/layout/Stack.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { ClassValue } from 'svelte/elements'
+  import type { Snippet } from 'svelte'
+
+  type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+  interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string
+    /** Space between children. @default 'sm' */
+    gap?: GapSize
+    children?: Snippet
+    class?: ClassValue | null
+    style?: string | null
+    [key: string]: unknown
+  }
+
+  let { as = 'div', gap = 'sm', children, class: klass = '', ...rest }: Props = $props()
+</script>
+
+<svelte:element this={as} class={['stack', klass]} data-gap={gap} {...rest}>
+  {@render children?.()}
+</svelte:element>
+
+<style>
+  .stack {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .stack[data-gap="none"] { gap: 0; }
+  .stack[data-gap="xs"]   { gap: var(--u); }
+  .stack[data-gap="sm"]   { gap: var(--u2); }
+  .stack[data-gap="md"]   { gap: var(--u3); }
+  .stack[data-gap="lg"]   { gap: var(--u4); }
+  .stack[data-gap="xl"]   { gap: var(--u5); }
+</style>

package/dist/components/layout/Stack.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { ClassValue } from 'svelte/elements';
+import type { Snippet } from 'svelte';
+type GapSize = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+interface Props {
+    /** HTML element to render as. @default 'div' */
+    as?: string;
+    /** Space between children. @default 'sm' */
+    gap?: GapSize;
+    children?: Snippet;
+    class?: ClassValue | null;
+    style?: string | null;
+    [key: string]: unknown;
+}
+declare const Stack: import("svelte").Component<Props, {}, "">;
+type Stack = ReturnType<typeof Stack>;
+export default Stack;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Stack } from './Stack.svelte';
+export { default as Inline } from './Inline.svelte';
+export { default as Spread } from './Spread.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Rule } from './Rule.svelte';
+export { default as Prose } from './Prose.svelte';

package/dist/components/layout/index.js

@@ -0,0 +1,7 @@
+export { default as Stack } from './Stack.svelte';
+export { default as Inline } from './Inline.svelte';
+export { default as Spread } from './Spread.svelte';
+export { default as Grid } from './Grid.svelte';
+export { default as Container } from './Container.svelte';
+export { default as Rule } from './Rule.svelte';
+export { default as Prose } from './Prose.svelte';

package/dist/components/navigation/Breadcrumb.stories.svelte

@@ -0,0 +1,122 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import Breadcrumb from "./Breadcrumb.svelte";
+
+  const { Story } = defineMeta({
+    title: "Navigation/Breadcrumb",
+    component: Breadcrumb,
+    tags: ["autodocs"],
+  });
+</script>
+
+<!-- AC 25: Default story — 3-crumb trail -->
+<Story
+  name="Default"
+  args={{
+    crumbs: [
+      { label: "Home", href: "/" },
+      { label: "Catalogue", href: "/catalogue" },
+      { label: "Conduit PDX-2", href: "/catalogue/conduit-pdx2" },
+    ],
+  }}
+  play={async ({ canvasElement }) => {
+    // AC 5 / AC 25: <nav> with aria-label="breadcrumb" is present
+    const nav = within(canvasElement).getByRole("navigation", {
+      name: "breadcrumb",
+    });
+    await expect(nav).toBeVisible();
+
+    // AC 6: direct child is <ol>
+    const ol = nav.querySelector("ol");
+    await expect(ol).not.toBeNull();
+    await expect(ol!.tagName).toBe("OL");
+
+    // AC 8 / AC 25: exactly 3 <li> elements
+    const items = ol!.querySelectorAll("li");
+    await expect(items.length).toBe(3);
+
+    // AC 11 / AC 25: "Home" does NOT have aria-current
+    const homeLink = within(canvasElement).getByRole("link", { name: "Home" });
+    await expect(homeLink).not.toHaveAttribute("aria-current");
+
+    // AC 11 / AC 25: "Catalogue" does NOT have aria-current
+    const catalogueLink = within(canvasElement).getByRole("link", {
+      name: "Catalogue",
+    });
+    await expect(catalogueLink).not.toHaveAttribute("aria-current");
+
+    // AC 10 / AC 25: last crumb "Conduit PDX-2" has aria-current="page"
+    const currentLink = within(canvasElement).getByRole("link", {
+      name: "Conduit PDX-2",
+    });
+    await expect(currentLink).toHaveAttribute("aria-current", "page");
+
+    // AC 12 / AC 25: exactly 2 aria-hidden separator elements
+    const separators = canvasElement.querySelectorAll('[aria-hidden="true"]');
+    await expect(separators.length).toBe(2);
+
+    // AC 9: "Home" link href is "/"
+    await expect(homeLink).toHaveAttribute("href", "/");
+
+    // AC 9: "Catalogue" link href is "/catalogue"
+    await expect(catalogueLink).toHaveAttribute("href", "/catalogue");
+  }}
+/>
+
+<!-- AC 26: Root Only — single crumb -->
+<Story
+  name="Root Only"
+  args={{
+    crumbs: [{ label: "Home", href: "/" }],
+  }}
+  play={async ({ canvasElement }) => {
+    // AC 5: <nav> with aria-label="breadcrumb" is present
+    const nav = within(canvasElement).getByRole("navigation", {
+      name: "breadcrumb",
+    });
+    await expect(nav).toBeVisible();
+
+    // AC 15 / AC 26: exactly 1 <li> element
+    const items = canvasElement.querySelectorAll("li");
+    await expect(items.length).toBe(1);
+
+    // AC 13 / AC 26: single crumb has aria-current="page"
+    const homeLink = within(canvasElement).getByRole("link", { name: "Home" });
+    await expect(homeLink).toHaveAttribute("aria-current", "page");
+
+    // AC 14 / AC 26: zero separator elements
+    const separators = canvasElement.querySelectorAll('[aria-hidden="true"]');
+    await expect(separators.length).toBe(0);
+  }}
+/>
+
+<!-- AC 27: Two Crumbs — intermediate depth -->
+<Story
+  name="Two Crumbs"
+  args={{
+    crumbs: [
+      { label: "Home", href: "/" },
+      { label: "Projects", href: "/projects" },
+    ],
+  }}
+  play={async ({ canvasElement }) => {
+    // AC 27: exactly 2 <li> elements
+    const items = canvasElement.querySelectorAll("li");
+    await expect(items.length).toBe(2);
+
+    // AC 27: "Home" does NOT have aria-current
+    const homeLink = within(canvasElement).getByRole("link", { name: "Home" });
+    await expect(homeLink).not.toHaveAttribute("aria-current");
+
+    // AC 27: "Projects" has aria-current="page"
+    const projectsLink = within(canvasElement).getByRole("link", {
+      name: "Projects",
+    });
+    await expect(projectsLink).toHaveAttribute("aria-current", "page");
+
+    // AC 27: exactly 1 separator element
+    const separators = canvasElement.querySelectorAll('[aria-hidden="true"]');
+    await expect(separators.length).toBe(1);
+  }}
+/>

package/dist/components/navigation/Breadcrumb.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import Breadcrumb from "./Breadcrumb.svelte";
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Breadcrumb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Breadcrumb = InstanceType<typeof Breadcrumb>;
+export default Breadcrumb;