@dxlbnl/ui 0.1.0

package/dist/components/patterns/KvList.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import Stack from '../layout/Stack.svelte'
+  import Spread from '../layout/Spread.svelte'
+
+  type KvColor = 'default' | 'ok' | 'amber' | 'danger' | 'cyan'
+
+  interface KvItem {
+    key: string
+    value: string
+    color?: KvColor
+  }
+
+  interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Array of `{ key, value, color? }` rows to render. */
+    items: KvItem[]
+    [key: string]: unknown
+  }
+
+  let {
+    items,
+    ...rest
+  }: Props = $props()
+</script>
+
+<Stack gap="none" {...rest}>
+  {#each items as item}
+    <div class="kv-row">
+      <Spread>
+        <span class="kv-key">{item.key}</span>
+        <span class="kv-val kv-val--{item.color ?? 'default'}">{item.value}</span>
+      </Spread>
+    </div>
+  {/each}
+</Stack>
+
+<style>
+  .kv-row {
+    padding: 6px 0;
+    border-bottom: 1px dashed var(--rule);
+    font-family: var(--mono);
+    font-size: var(--t-mono);
+  }
+
+  .kv-row:last-child {
+    border-bottom: none;
+  }
+
+  .kv-key {
+    color: var(--ink-faint);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    flex-shrink: 0;
+  }
+
+  .kv-val {
+    color: var(--ink);
+    text-align: right;
+  }
+
+  .kv-val--amber  { color: var(--amber); }
+  .kv-val--ok     { color: var(--ok); }
+  .kv-val--danger { color: var(--danger); }
+  .kv-val--cyan   { color: var(--cyan); }
+</style>

package/dist/components/patterns/KvList.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+type KvColor = 'default' | 'ok' | 'amber' | 'danger' | 'cyan';
+interface KvItem {
+    key: string;
+    value: string;
+    color?: KvColor;
+}
+interface Props extends HTMLAttributes<HTMLDivElement> {
+    /** Array of `{ key, value, color? }` rows to render. */
+    items: KvItem[];
+    [key: string]: unknown;
+}
+declare const KvList: import("svelte").Component<Props, {}, "">;
+type KvList = ReturnType<typeof KvList>;
+export default KvList;

package/dist/components/patterns/PageHero.stories.svelte

@@ -0,0 +1,62 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import PageHero from "./PageHero.svelte";
+  import Button from "../primitives/Button.svelte";
+
+  const { Story } = defineMeta({
+    title: "Patterns/PageHero",
+    component: PageHero,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Full" args={{ eyebrow: "// DEXTERLABS · WORKBENCH · 2026", heading: "Things built in the lab.", lede: "Software engineer by day; hardware builder by night." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { level: 1, name: "Things built in the lab." })).toBeVisible();
+    await expect(canvas.getByText(/DEXTERLABS · WORKBENCH/i)).toBeVisible();
+    await expect(canvas.getByText(/Software engineer by day/i)).toBeVisible();
+    await expect(canvas.getByRole("button", { name: "View Catalogue" })).toBeVisible();
+    await expect(canvasElement.querySelector("header")).not.toBeNull();
+    const header = canvasElement.querySelector("header");
+    await expect(getComputedStyle(header!).borderBottomStyle).not.toBe("none");
+  }}>
+  <Button variant="primary">View Catalogue</Button>
+  <Button variant="ghost">View Projects →</Button>
+</Story>
+
+<Story name="Heading Only" args={{ heading: "Catalogue" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { level: 1, name: "Catalogue" })).toBeVisible();
+    await expect(canvasElement.querySelector(".page-hero-eyebrow")).toBeNull();
+    await expect(canvasElement.querySelector(".page-hero-lede")).toBeNull();
+    await expect(canvasElement.querySelector(".page-hero-actions")).toBeNull();
+  }} />
+
+<Story name="No Slot" args={{ eyebrow: "// SECTION", heading: "Projects", lede: "Open source and web work." }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { level: 1, name: "Projects" })).toBeVisible();
+    await expect(canvas.getByText("Open source and web work.")).toBeVisible();
+    await expect(canvasElement.querySelector(".page-hero-actions")).toBeNull();
+  }} />
+
+<!-- B27 AC-13, AC-14, AC-15: no inline style= attributes on Text or Inline children -->
+<Story name="No Inline Styles" args={{ eyebrow: "// DEXTERLABS", heading: "Things built in the lab.", lede: "Software engineer by day; hardware builder by night." }}
+  play={async ({ canvasElement }) => {
+    const pageHero = canvasElement.querySelector(".page-hero") as HTMLElement;
+
+    // AC-13: eyebrow Text must have no style= attribute (margin-bottom moves to scoped CSS)
+    // AC-14: lede Text must have no style= attribute (margin-top + max-width move to scoped CSS)
+    // AC-15: actions Inline must have no style= attribute (margin-top moves to scoped CSS)
+    // Assert: no descendant element inside .page-hero carries a style= attribute
+    // (the only legitimate style= after B27 is the reactive fill width in ProgressBar,
+    //  which is not in PageHero — so zero style= attributes is the correct post-B27 state)
+    const styledEls = pageHero.querySelectorAll("[style]");
+    await expect(styledEls.length).toBe(0);
+  }}>
+  <Button variant="primary">View Catalogue</Button>
+  <Button variant="ghost">View Projects →</Button>
+</Story>

package/dist/components/patterns/PageHero.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import PageHero from "./PageHero.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 PageHero: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PageHero = InstanceType<typeof PageHero>;
+export default PageHero;

package/dist/components/patterns/PageHero.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import Inline from '../layout/Inline.svelte'
+  import Text from '../primitives/Text.svelte'
+  import Heading from '../primitives/Heading.svelte'
+
+  interface Props {
+    /** Small mono label shown above the heading. */
+    eyebrow?: string
+    /** Hero heading text. */
+    heading: string
+    /** Subtitle / lede text shown below the heading. */
+    lede?: string
+    children?: Snippet
+    [key: string]: unknown
+  }
+
+  let {
+    eyebrow,
+    heading,
+    lede,
+    children,
+    ...rest
+  }: Props = $props()
+</script>
+
+<header class="page-hero" {...rest}>
+  {#if eyebrow}
+    <div class="page-hero-eyebrow"><Text variant="eyebrow">{eyebrow}</Text></div>
+  {/if}
+  <Heading level={1} variant="hero">{heading}</Heading>
+  {#if lede}
+    <div class="page-hero-lede"><Text variant="lede">{lede}</Text></div>
+  {/if}
+  {#if children}
+    <div class="page-hero-actions">
+      <Inline gap="sm">
+        {@render children()}
+      </Inline>
+    </div>
+  {/if}
+</header>
+
+<style>
+  .page-hero {
+    padding: 48px 0 40px;
+    border-bottom: 1px solid var(--rule);
+  }
+
+  .page-hero-eyebrow {
+    margin-bottom: 12px;
+  }
+
+  .page-hero-lede {
+    margin-top: 20px;
+    max-width: 62ch;
+  }
+
+  .page-hero-actions {
+    margin-top: 24px;
+  }
+</style>

package/dist/components/patterns/PageHero.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Small mono label shown above the heading. */
+    eyebrow?: string;
+    /** Hero heading text. */
+    heading: string;
+    /** Subtitle / lede text shown below the heading. */
+    lede?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+}
+declare const PageHero: import("svelte").Component<Props, {}, "">;
+type PageHero = ReturnType<typeof PageHero>;
+export default PageHero;

package/dist/components/patterns/ProgressBar.stories.svelte

@@ -0,0 +1,83 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import ProgressBar from "./ProgressBar.svelte";
+  import { resolveTokenColor } from "../../storybook-utils.js";
+
+  const { Story } = defineMeta({
+    title: "Patterns/ProgressBar",
+    component: ProgressBar,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="Ok 68 Percent" args={{ value: 68, label: "+12V load", color: "ok" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const progressbar = canvas.getByRole("progressbar");
+    await expect(progressbar).toBeVisible();
+    await expect(progressbar).toHaveAttribute("aria-valuenow", "68");
+    await expect(progressbar).toHaveAttribute("aria-valuemin", "0");
+    await expect(progressbar).toHaveAttribute("aria-valuemax", "100");
+    await expect(canvas.getByText("+12V load")).toBeVisible();
+    await expect(canvas.getByText("68%")).toBeVisible();
+    const fill = canvasElement.querySelector(".progress-fill");
+    await expect(getComputedStyle(fill!).width).not.toBe("0px");
+    const okColor = resolveTokenColor("--ok");
+    await expect(getComputedStyle(fill!).backgroundColor).toBe(okColor);
+  }} />
+
+<Story name="Amber 88 Percent" args={{ value: 88, label: "-12V load", color: "amber" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const progressbar = canvas.getByRole("progressbar");
+    await expect(progressbar).toHaveAttribute("aria-valuenow", "88");
+    const fill = canvasElement.querySelector(".progress-fill");
+    const amberColor = resolveTokenColor("--amber");
+    await expect(getComputedStyle(fill!).backgroundColor).toBe(amberColor);
+  }} />
+
+<Story name="Danger 97 Percent" args={{ value: 97, label: "Thermal", color: "danger" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const progressbar = canvas.getByRole("progressbar");
+    await expect(progressbar).toHaveAttribute("aria-valuenow", "97");
+    const fill = canvasElement.querySelector(".progress-fill");
+    const dangerColor = resolveTokenColor("--danger");
+    await expect(getComputedStyle(fill!).backgroundColor).toBe(dangerColor);
+  }} />
+
+<Story name="No Label" args={{ value: 50 }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const progressbar = canvas.getByRole("progressbar");
+    await expect(progressbar).toBeVisible();
+    await expect(progressbar).toHaveAttribute("aria-label", "Progress");
+    await expect(canvasElement.querySelector(".progress-header")).toBeNull();
+  }} />
+
+<Story name="Clamped at 100" args={{ value: 150, label: "Overflow", color: "danger" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const progressbar = canvas.getByRole("progressbar");
+    await expect(progressbar).toHaveAttribute("aria-valuenow", "100");
+    await expect(canvas.getByText("100%")).toBeVisible();
+  }} />
+
+<Story name="Clamped at 0" args={{ value: -10, label: "Underflow", color: "ok" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const progressbar = canvas.getByRole("progressbar");
+    await expect(progressbar).toHaveAttribute("aria-valuenow", "0");
+    await expect(canvas.getByText("0%")).toBeVisible();
+  }} />
+
+<!-- B27 AC-18: Stack root must have no style="width: 100%" attribute -->
+<Story name="No Inline Width Style" args={{ value: 50, label: "Load" }}
+  play={async ({ canvasElement }) => {
+    // Before B27: <Stack style="width: 100%;"> is the root — it carries a style= attribute.
+    // After B27: width: 100% moves to scoped CSS; the Stack root must have no style= attribute.
+    // The Stack root is the first element child of the canvas (it receives {...rest}).
+    const root = canvasElement.firstElementChild as HTMLElement;
+    await expect(root.getAttribute("style")).toBeNull();
+  }} />

package/dist/components/patterns/ProgressBar.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import ProgressBar from "./ProgressBar.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 ProgressBar: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ProgressBar = InstanceType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/patterns/ProgressBar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import Stack from '../layout/Stack.svelte'
+  import Spread from '../layout/Spread.svelte'
+  import Text from '../primitives/Text.svelte'
+
+  type ProgressColor = 'ok' | 'amber' | 'danger'
+
+  interface Props {
+    /** Progress percentage (0–100). Clamped automatically. */
+    value: number
+    /** Optional label shown above the bar alongside the percentage. */
+    label?: string
+    /** Bar colour variant. @default 'ok' */
+    color?: ProgressColor
+    [key: string]: unknown
+  }
+
+  let {
+    value,
+    label,
+    color = 'ok',
+    ...rest
+  }: Props = $props()
+
+  const clampedValue = $derived(Math.min(100, Math.max(0, value)))
+</script>
+
+<div class="progress-bar" {...rest}>
+  <Stack gap="xs">
+    {#if label}
+      <Spread aria-hidden="true">
+        <Text variant="mono" color="faint" size="xs">{label}</Text>
+        <Text variant="mono" color={color} size="xs">{clampedValue}%</Text>
+      </Spread>
+    {/if}
+    <div
+      class="progress-track"
+      role="progressbar"
+      aria-valuenow={clampedValue}
+      aria-valuemin={0}
+      aria-valuemax={100}
+      aria-label={label ?? 'Progress'}
+    >
+      <div
+        class="progress-fill progress-fill--{color}"
+        style="width: {clampedValue}%"
+      ></div>
+    </div>
+  </Stack>
+</div>
+
+<style>
+  .progress-bar {
+    width: 100%;
+  }
+
+  .progress-track {
+    height: 5px;
+    background: var(--bg-sunken);
+    border: 1px solid var(--rule);
+  }
+
+  .progress-fill {
+    height: 100%;
+    background: var(--ok);
+    transition: width 0.3s;
+  }
+
+  .progress-fill--amber  { background: var(--amber); }
+  .progress-fill--danger { background: var(--danger); }
+</style>

package/dist/components/patterns/ProgressBar.svelte.d.ts

@@ -0,0 +1,13 @@
+type ProgressColor = 'ok' | 'amber' | 'danger';
+interface Props {
+    /** Progress percentage (0–100). Clamped automatically. */
+    value: number;
+    /** Optional label shown above the bar alongside the percentage. */
+    label?: string;
+    /** Bar colour variant. @default 'ok' */
+    color?: ProgressColor;
+    [key: string]: unknown;
+}
+declare const ProgressBar: import("svelte").Component<Props, {}, "">;
+type ProgressBar = ReturnType<typeof ProgressBar>;
+export default ProgressBar;

package/dist/components/patterns/SectionFoot.stories.svelte

@@ -0,0 +1,37 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import SectionFoot from "./SectionFoot.svelte";
+
+  const { Story } = defineMeta({
+    title: "Patterns/SectionFoot",
+    component: SectionFoot,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="With Count and Meta" args={{ href: "/hardware", label: "VIEW ALL HARDWARE →", count: 4, meta: "SHIPPED BY DEXTERLABS · DELFT, NL" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const link = canvas.getByRole("link", { name: "VIEW ALL HARDWARE →" });
+    await expect(link).toBeVisible();
+    await expect(link).toHaveAttribute("href", "/hardware");
+    await expect(canvas.getByText(/SHIPPED BY DEXTERLABS/i)).toBeVisible();
+    await expect(canvasElement.querySelector("footer")).not.toBeNull();
+    const footer = canvasElement.querySelector("footer");
+    await expect(getComputedStyle(footer!).borderTopStyle).not.toBe("none");
+  }} />
+
+<Story name="Link Only" args={{ href: "/projects", label: "VIEW ALL PROJECTS →" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("link", { name: "VIEW ALL PROJECTS →" })).toBeVisible();
+    await expect(canvasElement.querySelector(".section-foot-meta")).toBeNull();
+  }} />
+
+<Story name="Count Only" args={{ href: "/notes", label: "VIEW ALL NOTES →", count: 12 }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("link")).toBeVisible();
+    await expect(canvas.getByText("12")).toBeVisible();
+  }} />

package/dist/components/patterns/SectionFoot.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import SectionFoot from "./SectionFoot.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 SectionFoot: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SectionFoot = InstanceType<typeof SectionFoot>;
+export default SectionFoot;

package/dist/components/patterns/SectionFoot.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import Spread from '../layout/Spread.svelte'
+
+  interface Props extends HTMLAttributes<HTMLElement> {
+    /** Link URL for the "view all" anchor. */
+    href: string
+    /** Link label text. */
+    label: string
+    /** Optional item count shown on the right. */
+    count?: number
+    /** Optional meta string shown alongside the count. */
+    meta?: string
+    [key: string]: unknown
+  }
+
+  let {
+    href,
+    label,
+    count,
+    meta,
+    ...rest
+  }: Props = $props()
+</script>
+
+<footer class="section-foot" {...rest}>
+  <Spread>
+    <a class="section-foot-link" {href}>{label}</a>
+    {#if count !== undefined || meta}
+      <span class="section-foot-meta">
+        {#if count !== undefined && meta}
+          {count} · {meta}
+        {:else if count !== undefined}
+          {count}
+        {:else}
+          {meta}
+        {/if}
+      </span>
+    {/if}
+  </Spread>
+</footer>
+
+<style>
+  .section-foot {
+    border-top: 1px solid var(--rule);
+    padding: 12px 0;
+    font-family: var(--mono);
+    font-size: var(--t-mono);
+    letter-spacing: 0.06em;
+    margin-top: 20px;
+  }
+
+  .section-foot-link {
+    color: var(--amber);
+    text-transform: uppercase;
+    text-decoration: none;
+    cursor: pointer;
+    transition: color var(--transition);
+  }
+
+  .section-foot-link:hover {
+    color: var(--ink);
+  }
+
+  .section-foot-meta {
+    color: var(--ink-faint);
+    text-transform: uppercase;
+    font-size: var(--t-micro);
+  }
+</style>

package/dist/components/patterns/SectionFoot.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { HTMLAttributes } from 'svelte/elements';
+interface Props extends HTMLAttributes<HTMLElement> {
+    /** Link URL for the "view all" anchor. */
+    href: string;
+    /** Link label text. */
+    label: string;
+    /** Optional item count shown on the right. */
+    count?: number;
+    /** Optional meta string shown alongside the count. */
+    meta?: string;
+    [key: string]: unknown;
+}
+declare const SectionFoot: import("svelte").Component<Props, {}, "">;
+type SectionFoot = ReturnType<typeof SectionFoot>;
+export default SectionFoot;

package/dist/components/patterns/SectionHead.stories.svelte

@@ -0,0 +1,67 @@
+<script module lang="ts">
+  import { defineMeta } from "@storybook/addon-svelte-csf";
+  import { expect, within } from "storybook/test";
+  import SectionHead from "./SectionHead.svelte";
+
+  const { Story } = defineMeta({
+    title: "Patterns/SectionHead",
+    component: SectionHead,
+    tags: ["autodocs"],
+  });
+</script>
+
+<Story name="With Eyebrow and Sublabel" args={{ eyebrow: "// 0x01", heading: "Catalogue", sublabel: "PRODUCTION-READY HARDWARE" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { level: 2, name: "Catalogue" })).toBeVisible();
+    await expect(canvas.getByText(/\/\/ 0x01/)).toBeVisible();
+    await expect(canvas.getByText(/PRODUCTION-READY HARDWARE/i)).toBeVisible();
+    await expect(canvasElement.querySelector("section")).not.toBeNull();
+    const section = canvasElement.querySelector("section");
+    await expect(getComputedStyle(section!).borderBottomStyle).not.toBe("none");
+  }} />
+
+<Story name="Heading Only" args={{ heading: "Projects" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { level: 2, name: "Projects" })).toBeVisible();
+    await expect(canvasElement.querySelector(".section-num")).toBeNull();
+    await expect(canvasElement.querySelector(".section-sub")).toBeNull();
+  }} />
+
+<Story name="With Children Slot" args={{ eyebrow: "// 0x02", heading: "Notes" }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole("heading", { level: 2, name: "Notes" })).toBeVisible();
+    await expect(canvas.getByText("Recent bench notes and experiments.")).toBeVisible();
+  }}>
+  <p>Recent bench notes and experiments.</p>
+</Story>
+
+<!-- B27 AC-11: Stack gap uses gap="xs" prop — no style="gap: 6px" inline attribute -->
+<!-- B27 AC-10: Inline uses align="baseline" — no style="align-items: baseline" inline attribute -->
+<!-- B27 AC-12: sublabel margin-left moves to scoped CSS — no style="margin-left: auto" inline attribute -->
+<Story name="No Inline Styles" args={{ eyebrow: "// 0x01", heading: "Catalogue", sublabel: "PRODUCTION-READY" }}
+  play={async ({ canvasElement }) => {
+    // The Stack root (direct child of .section-head) must have no style= attribute
+    const sectionHead = canvasElement.querySelector(".section-head") as HTMLElement;
+    const stackRoot = sectionHead.firstElementChild as HTMLElement;
+    await expect(stackRoot.getAttribute("style")).toBeNull();
+
+    // The Inline root (wrapping heading + sublabel) must have no style= attribute
+    const inlineRoot = sectionHead.querySelector(".inline") as HTMLElement;
+    await expect(inlineRoot.getAttribute("style")).toBeNull();
+
+    // The sublabel Text element must have no style= attribute
+    // (Text renders as a <p> or <span>; it carries class="sublabel" after implementation,
+    //  but currently carries style="margin-left: auto;" directly on it)
+    // Find the element containing the sublabel text
+    const sublabelEl = canvasElement.querySelector('[class*="sublabel"]') as HTMLElement;
+    // If not yet wrapped in .sublabel span, fall back to querying by text content
+    // Either way: no element in the section should carry style="margin-left: auto;"
+    const allEls = sectionHead.querySelectorAll("[style]");
+    const hasMarginLeftAuto = Array.from(allEls).some(
+      (el) => (el as HTMLElement).getAttribute("style")?.includes("margin-left")
+    );
+    await expect(hasMarginLeftAuto).toBe(false);
+  }} />

package/dist/components/patterns/SectionHead.stories.svelte.d.ts

@@ -0,0 +1,19 @@
+import SectionHead from "./SectionHead.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 SectionHead: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type SectionHead = InstanceType<typeof SectionHead>;
+export default SectionHead;