@dxlbnl/ui 0.1.0 → 1.0.0

package/dist/components/forms/Switch.stories.svelte

@@ -11,9 +11,11 @@
   });
 </script>
 
-<!-- AC-44, AC-45, AC-46, AC-47: Off state -->
-<Story name="Off (Default)" args={{ label: "Dark mode", checked: false }}
-  play={async ({ canvasElement }) => {
+<!-- AC-44, AC-45, AC-46, AC-47, AC-50: Off state + Space key toggle -->
+<Story
+  name="Off (Default)"
+  args={{ label: "Dark mode", checked: false }}
+  play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
     // AC-44: renders a button with role="switch"
     // AC-46: accessible name provided by aria-label={label}
@@ -24,11 +26,32 @@
     // AC-47: track background matches var(--bg-sunken) when off
     const bgSunken = resolveTokenColor("--bg-sunken");
     await expect(getComputedStyle(sw).backgroundColor).toBe(bgSunken);
-  }} />
+    // AC-1: off-state border resolves to --rule
+    const ruleColor = resolveTokenColor("--rule");
+    await expect(getComputedStyle(sw).borderColor).toBe(ruleColor);
+    // AC-2: border is NOT invisible (not the same as --bg)
+    const bgColor = resolveTokenColor("--bg");
+    await expect(getComputedStyle(sw).borderColor).not.toBe(bgColor);
+    // AC-5: clicking the label text toggles the switch on
+    await userEvent.click(canvas.getByText("Dark mode"));
+    await expect(sw.getAttribute("aria-checked")).toBe("true");
+    // AC-8: clicking the button itself flips it back to off
+    await userEvent.click(sw);
+    await expect(sw.getAttribute("aria-checked")).toBe("false");
+    // AC-50: Space key toggles switch from off to on
+    sw.focus();
+    await expect(sw).toHaveFocus();
+    await userEvent.keyboard(" ");
+    await expect(sw.getAttribute("aria-checked")).toBe("true");
+    await userEvent.keyboard(" ");
+  }}
+/>
 
-<!-- AC-45, AC-48: On state -->
-<Story name="On" args={{ label: "Dark mode", checked: true }}
-  play={async ({ canvasElement }) => {
+<!-- AC-45, AC-48, AC-52: On state + amber track + pill shape dimensions -->
+<Story
+  name="On"
+  args={{ label: "Dark mode", checked: true }}
+  play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
     const sw = canvas.getByRole("switch", { name: "Dark mode" });
     // AC-45: aria-checked is "true" when on
@@ -36,51 +59,36 @@
     // AC-48: track background matches var(--amber) when on
     const amberColor = resolveTokenColor("--amber");
     await expect(getComputedStyle(sw).backgroundColor).toBe(amberColor);
-  }} />
+    // AC-3: on-state border resolves to --amber
+    await expect(getComputedStyle(sw).borderColor).toBe(amberColor);
+    // AC-52: pill shape — borderRadius is 11px, width 40px, height 22px
+    await expect(getComputedStyle(sw).borderRadius).toBe("11px");
+    await expect(getComputedStyle(sw).width).toBe("40px");
+    await expect(getComputedStyle(sw).height).toBe("22px");
+    // AC-6: clicking the label text toggles the switch off
+    await userEvent.click(canvas.getByText("Dark mode"));
+    await expect(sw.getAttribute("aria-checked")).toBe("false");
+    await userEvent.click(canvas.getByText("Dark mode"));
+  }}
+/>
 
-<!-- AC-49: disabled off — toBeDisabled and wrap opacity 0.4 -->
-<Story name="Disabled Off" args={{ label: "Feature flag", disabled: true, checked: false }}
-  play={async ({ canvasElement }) => {
+<!-- AC-49: disabled — toBeDisabled, wrap opacity 0.4, no-toggle, and disabled-on aria-checked -->
+<Story
+  name="Disabled"
+  args={{ label: "Feature flag", disabled: true, checked: false }}
+  play={async ({ canvasElement, userEvent }) => {
     const canvas = within(canvasElement);
     const sw = canvas.getByRole("switch", { name: "Feature flag" });
     await expect(sw).toBeDisabled();
     // AC-49: wrap opacity is 0.4
     const wrap = canvasElement.querySelector(".switch-wrap");
     await expect(getComputedStyle(wrap!).opacity).toBe("0.4");
-  }} />
-
-<!-- AC-49: disabled on — toBeDisabled and aria-checked true -->
-<Story name="Disabled On" args={{ label: "Feature flag", disabled: true, checked: true }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const sw = canvas.getByRole("switch", { name: "Feature flag" });
-    await expect(sw).toBeDisabled();
-    await expect(sw.getAttribute("aria-checked")).toBe("true");
-  }} />
-
-<!-- AC-50: Space key toggles switch from off to on -->
-<Story name="Space to Toggle" args={{ label: "Toggle", checked: false }}
-  play={async ({ canvasElement, userEvent }) => {
-    const canvas = within(canvasElement);
-    const sw = canvas.getByRole("switch", { name: "Toggle" });
+    // AC-4: disabled off-state border still resolves to --rule
+    const ruleColor = resolveTokenColor("--rule");
+    await expect(getComputedStyle(sw).borderColor).toBe(ruleColor);
+    // AC-7: clicking the label on a disabled switch must NOT toggle it
+    await userEvent.click(canvas.getByText("Feature flag"));
     await expect(sw.getAttribute("aria-checked")).toBe("false");
-    await userEvent.tab();
-    await expect(sw).toHaveFocus();
-    await userEvent.keyboard(" ");
-    // AC-50: after Space on an off switch, aria-checked becomes "true"
-    await expect(sw.getAttribute("aria-checked")).toBe("true");
-  }} />
-
-<!-- AC-48, AC-52: amber track when on + pill shape dimensions -->
-<Story name="Amber Track When On" args={{ label: "Power", checked: true }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const sw = canvas.getByRole("switch", { name: "Power" });
-    // AC-48: track background matches var(--amber)
-    const amberColor = resolveTokenColor("--amber");
-    await expect(getComputedStyle(sw).backgroundColor).toBe(amberColor);
-    // AC-52: pill shape — borderRadius is 11px, width 40px, height 22px
-    await expect(getComputedStyle(sw).borderRadius).toBe("11px");
-    await expect(getComputedStyle(sw).width).toBe("40px");
-    await expect(getComputedStyle(sw).height).toBe("22px");
-  }} />
+    await userEvent.click(canvas.getByText("Feature flag"));
+  }}
+/>

package/dist/components/forms/Switch.svelte

@@ -46,7 +46,7 @@
   >
     <span class="switch-knob" aria-hidden="true"></span>
   </button>
-  <span class="switch-label">{label}</span>
+  <span class="switch-label" onclick={() => { if (!disabled) checked = !checked }}>{label}</span>
 </span>
 
 <style>
@@ -70,7 +70,7 @@
     width: 40px;
     height: 22px;
     border-radius: 11px;
-    border: 1px solid var(--rail);
+    border: 1px solid var(--rule);
     background: var(--bg-sunken);
     cursor: pointer;
     padding: 0;
@@ -98,12 +98,13 @@
     width: 16px;
     height: 16px;
     border-radius: 50%;
-    background: var(--bg);
+    background: var(--ink-faint);
     transform: translateX(2px);
     transition: transform var(--transition);
   }
 
   .switch.on .switch-knob {
+    background: var(--bg);
     transform: translateX(20px);
   }
 

package/dist/components/patterns/CtaBlock.svelte

@@ -48,6 +48,7 @@
 
 <style>
   .cta-block {
+    display: block;
     border: 1px solid var(--amber);
     padding: 24px 32px;
     color: inherit;

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

@@ -60,3 +60,42 @@
   <Button variant="primary">View Catalogue</Button>
   <Button variant="ghost">View Projects →</Button>
 </Story>
+
+<!-- B36 AC-1, AC-2 branch B, AC-3, AC-4, AC-8: snippet-based heading with mixed ink colors -->
+<Story name="SnippetHeading"
+  play={async ({ canvasElement }) => {
+    // AC-3a: h1 is present and visible
+    const h1 = canvasElement.querySelector("h1");
+    await expect(h1).not.toBeNull();
+    await expect(h1).toBeVisible();
+
+    // AC-3b: h1 contains an <em> child
+    const em = h1!.querySelector("em");
+    await expect(em).not.toBeNull();
+
+    // AC-3d: computed fontStyle of <em> is "normal" (proves :global rule fired)
+    await expect(getComputedStyle(em!).fontStyle).toBe("normal");
+  }}>
+  {#snippet template(args)}
+    {#snippet headingContent()}
+      Dexter.<br /><em>Things built</em><br />in the lab.
+    {/snippet}
+    <PageHero eyebrow="// DEXTERLABS" headingContent={headingContent} />
+  {/snippet}
+</Story>
+
+<!-- B36 AC-5, AC-6: border prop — suppresses bottom rule -->
+<Story name="NoBorder" args={{ eyebrow: "// DEXTERLABS", heading: "Homepage", border: false }}
+  play={async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    // AC-6a: heading is visible
+    await expect(canvas.getByRole("heading", { level: 1, name: "Homepage" })).toBeVisible();
+
+    // AC-6b: <header> element is present
+    const header = canvasElement.querySelector("header");
+    await expect(header).not.toBeNull();
+
+    // AC-6c: border-bottom is suppressed
+    await expect(getComputedStyle(header!).borderBottomStyle).toBe("none");
+  }} />

package/dist/components/patterns/PageHero.svelte

@@ -8,9 +8,13 @@
     /** Small mono label shown above the heading. */
     eyebrow?: string
     /** Hero heading text. */
-    heading: string
+    heading?: string
+    /** Snippet-based hero heading — takes precedence over `heading` string when provided. */
+    headingContent?: Snippet
     /** Subtitle / lede text shown below the heading. */
     lede?: string
+    /** Show bottom border rule. @default true */
+    border?: boolean
     children?: Snippet
     [key: string]: unknown
   }
@@ -18,17 +22,19 @@
   let {
     eyebrow,
     heading,
+    headingContent,
     lede,
+    border = true,
     children,
     ...rest
   }: Props = $props()
 </script>
 
-<header class="page-hero" {...rest}>
+<header class="page-hero" class:page-hero--bordered={border} {...rest}>
   {#if eyebrow}
     <div class="page-hero-eyebrow"><Text variant="eyebrow">{eyebrow}</Text></div>
   {/if}
-  <Heading level={1} variant="hero">{heading}</Heading>
+  <Heading level={1} variant="hero">{#if headingContent}{@render headingContent()}{:else}{heading}{/if}</Heading>
   {#if lede}
     <div class="page-hero-lede"><Text variant="lede">{lede}</Text></div>
   {/if}
@@ -44,6 +50,9 @@
 <style>
   .page-hero {
     padding: 48px 0 40px;
+  }
+
+  .page-hero--bordered {
     border-bottom: 1px solid var(--rule);
   }
 
@@ -59,4 +68,9 @@
   .page-hero-actions {
     margin-top: 24px;
   }
+
+  .page-hero :global(.hero-heading em) {
+    font-style: normal;
+    color: var(--ink-faint);
+  }
 </style>

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

@@ -3,9 +3,13 @@ interface Props {
     /** Small mono label shown above the heading. */
     eyebrow?: string;
     /** Hero heading text. */
-    heading: string;
+    heading?: string;
+    /** Snippet-based hero heading — takes precedence over `heading` string when provided. */
+    headingContent?: Snippet;
     /** Subtitle / lede text shown below the heading. */
     lede?: string;
+    /** Show bottom border rule. @default true */
+    border?: boolean;
     children?: Snippet;
     [key: string]: unknown;
 }

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

@@ -1,4 +1,3 @@
-export { default as Alert } from './Alert.svelte';
 export { default as CtaBlock } from './CtaBlock.svelte';
 export { default as StatCard } from './StatCard.svelte';
 export { default as KvList } from './KvList.svelte';

package/dist/components/patterns/index.js

@@ -1,4 +1,3 @@
-export { default as Alert } from './Alert.svelte';
 export { default as CtaBlock } from './CtaBlock.svelte';
 export { default as StatCard } from './StatCard.svelte';
 export { default as KvList } from './KvList.svelte';

package/dist/components/primitives/Heading.stories.svelte

@@ -12,6 +12,9 @@
 
 <!-- AC-17, AC-18, AC-19, AC-21, AC-22, AC-23: levels 1/2/3 render h1/h2/h3 with default variant classes -->
 <!-- AC-20: default level is 2 -->
+<!-- AC-12: H1 font-size === 72px (var(--t-h1)) -->
+<!-- AC-10: H2 font-size === 36px (var(--t-h2)) -->
+<!-- AC-11: H3 font-size === 24px (var(--t-h3)) -->
 <Story name="Levels"
   play={async ({ canvasElement }) => {
     const canvas = within(canvasElement);
@@ -19,14 +22,17 @@
     const h1 = canvas.getByTestId("level-1");
     await expect(h1.tagName).toBe("H1");
     await expect(h1.classList.contains("h1")).toBe(true);
+    await expect(getComputedStyle(h1).fontSize).toBe("72px");
 
     const h2 = canvas.getByTestId("level-2");
     await expect(h2.tagName).toBe("H2");
     await expect(h2.classList.contains("h2")).toBe(true);
+    await expect(getComputedStyle(h2).fontSize).toBe("36px");
 
     const h3 = canvas.getByTestId("level-3");
     await expect(h3.tagName).toBe("H3");
     await expect(h3.classList.contains("h3")).toBe(true);
+    await expect(getComputedStyle(h3).fontSize).toBe("24px");
 
     const defaultLevel = canvas.getByTestId("level-default");
     await expect(defaultLevel.tagName).toBe("H2");
@@ -105,33 +111,3 @@
   Section Title
 </Story>
 
-<!-- B26 AC-12, AC-43: size="xs" on h3 → 12px -->
-<Story name="SizeXs" args={{ level: 3, size: "xs" }}
-  play={async ({ canvasElement }) => {
-    const el = canvasElement.firstElementChild!;
-    await expect(el.getAttribute("data-size")).toBe("xs");
-    await expect(getComputedStyle(el).fontSize).toBe("12px");
-  }}>
-  Micro heading
-</Story>
-
-<!-- B26 AC-13, AC-15, AC-43: size="lg" on h3 → 19px, letterSpacing stays at h3 default -0.01em -->
-<Story name="SizeLg" args={{ level: 3, size: "lg" }}
-  play={async ({ canvasElement }) => {
-    const el = canvasElement.firstElementChild!;
-    await expect(el.getAttribute("data-size")).toBe("lg");
-    await expect(getComputedStyle(el).fontSize).toBe("19px");
-    await expect(getComputedStyle(el).letterSpacing).toBe("-0.19px");
-  }}>
-  Lede-size heading
-</Story>
-
-<!-- B26 AC-14: size="xl" on h3 → 24px -->
-<Story name="SizeXl" args={{ level: 3, size: "xl" }}
-  play={async ({ canvasElement }) => {
-    const el = canvasElement.firstElementChild!;
-    await expect(el.getAttribute("data-size")).toBe("xl");
-    await expect(getComputedStyle(el).fontSize).toBe("24px");
-  }}>
-  XL heading
-</Story>

package/dist/components/primitives/Heading.svelte

@@ -5,8 +5,6 @@
   type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
   type HeadingVariant = 'display' | 'hero' | 'h1' | 'h2' | 'h3'
   type TextColor = 'ink' | 'dim' | 'faint' | 'amber' | 'cyan' | 'ok' | 'danger'
-  type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-
   interface Props {
     /** HTML heading level (h1–h6). @default 2 */
     level?: HeadingLevel
@@ -14,8 +12,6 @@
     variant?: HeadingVariant
     /** Text colour mapped to a design token. */
     color?: TextColor
-    /** Font size override mapped to a type-scale token. */
-    size?: SizeVariant
     children?: Snippet
     class?: ClassValue | null
     style?: string | null
@@ -46,7 +42,7 @@
     danger: 'danger',
   }
 
-  let { level = 2, variant, color, size, children, class: klass = '', style, ...rest }: Props = $props()
+  let { level = 2, variant, color, children, class: klass = '', style, ...rest }: Props = $props()
 
   const resolvedVariant = $derived(variant ?? DEFAULT_VARIANT[level])
   const variantClass = $derived(resolvedVariant ? VARIANT_CLASS[resolvedVariant] : undefined)
@@ -54,7 +50,7 @@
   const mergedStyle = $derived([colorStyle, style].filter(Boolean).join(' ') || undefined)
 </script>
 
-<svelte:element this={"h" + level} class={[variantClass, klass]} style={mergedStyle} data-size={size || undefined} {...rest}>
+<svelte:element this={"h" + level} class={[variantClass, klass]} style={mergedStyle} {...rest}>
   {@render children?.()}
 </svelte:element>
 
@@ -99,9 +95,4 @@
     line-height: 0.9;
   }
 
-  [data-size="xs"] { font-size: var(--t-micro) }
-  [data-size="sm"] { font-size: var(--t-mono) }
-  [data-size="md"] { font-size: var(--t-body) }
-  [data-size="lg"] { font-size: var(--t-lede) }
-  [data-size="xl"] { font-size: var(--t-h3) }
 </style>

package/dist/components/primitives/Heading.svelte.d.ts

@@ -3,7 +3,6 @@ import type { Snippet } from 'svelte';
 type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 type HeadingVariant = 'display' | 'hero' | 'h1' | 'h2' | 'h3';
 type TextColor = 'ink' | 'dim' | 'faint' | 'amber' | 'cyan' | 'ok' | 'danger';
-type SizeVariant = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 interface Props {
     /** HTML heading level (h1–h6). @default 2 */
     level?: HeadingLevel;
@@ -11,8 +10,6 @@ interface Props {
     variant?: HeadingVariant;
     /** Text colour mapped to a design token. */
     color?: TextColor;
-    /** Font size override mapped to a type-scale token. */
-    size?: SizeVariant;
     children?: Snippet;
     class?: ClassValue | null;
     style?: string | null;

package/dist/index.d.ts

@@ -3,8 +3,8 @@ export { Stack, Inline, Spread, Grid, Container, Rule, Prose } from './component
 export { Card, ProductCard, ProjectCard, NoteCard } from './components/cards/index.js';
 export { Nav, Breadcrumb } from './components/navigation/index.js';
 export { Input, Textarea, Select, InputWrap, Field, Checkbox, Radio, RadioGroup, Switch } from './components/forms/index.js';
-export { Modal, Toast, ToastRegion } from './components/feedback/index.js';
+export { Alert, Modal, Toast, ToastRegion } from './components/feedback/index.js';
 export { toast } from './stores/toast.js';
 export type { ToastItem, ToastVariant, ToastOptions } from './stores/toast.js';
-export { Alert, CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero } from './components/patterns/index.js';
+export { CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero } from './components/patterns/index.js';
 export { Accordion, AccordionItem, Tabs, Table } from './components/data/index.js';

package/dist/index.js

@@ -4,7 +4,7 @@ export { Stack, Inline, Spread, Grid, Container, Rule, Prose } from './component
 export { Card, ProductCard, ProjectCard, NoteCard } from './components/cards/index.js';
 export { Nav, Breadcrumb } from './components/navigation/index.js';
 export { Input, Textarea, Select, InputWrap, Field, Checkbox, Radio, RadioGroup, Switch } from './components/forms/index.js';
-export { Modal, Toast, ToastRegion } from './components/feedback/index.js';
+export { Alert, Modal, Toast, ToastRegion } from './components/feedback/index.js';
 export { toast } from './stores/toast.js';
-export { Alert, CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero } from './components/patterns/index.js';
+export { CtaBlock, StatCard, KvList, ProgressBar, ActivityRow, SectionHead, SectionFoot, PageHero } from './components/patterns/index.js';
 export { Accordion, AccordionItem, Tabs, Table } from './components/data/index.js';

package/dist/stores/toast.d.ts

@@ -2,12 +2,14 @@ export type ToastVariant = "success" | "warning" | "error";
 export interface ToastItem {
     id: string;
     message: string;
+    title: string;
     variant: ToastVariant;
     duration: number;
 }
 export interface ToastOptions {
     variant?: ToastVariant;
     duration?: number;
+    title?: string;
 }
 declare function push(message: string, options?: ToastOptions): string;
 declare function dismiss(id: string): void;

package/dist/stores/toast.js

@@ -6,6 +6,7 @@ function push(message, options) {
     const item = {
         id,
         message,
+        title: options?.title ?? '',
         variant: options?.variant ?? "success",
         duration: options?.duration ?? 5000,
     };

package/dist/tokens/tokens.css

@@ -12,6 +12,7 @@
   --bg-rail:    #0f1211;   /* cards, nav, sidebars */
   --bg-elev:    #141817;   /* elevated surfaces, inline-code bg */
   --bg-sunken:  #070908;   /* code blocks, status bar, sunken wells */
+  --overlay: rgba(7, 9, 8, 0.85);
 
   /* Ink */
   --ink:        #d6e2dc;   /* primary text */
@@ -93,4 +94,5 @@
   --ok:          #356b31;
   --shiki-token-string:            #2d7a50;
   --shiki-token-string-expression: #2d7a50;
+  --overlay: rgba(7, 9, 8, 0.85);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxlbnl/ui",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",

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

@@ -1,63 +0,0 @@
-<script module lang="ts">
-  import { defineMeta } from "@storybook/addon-svelte-csf";
-  import { expect, within } from "storybook/test";
-  import Alert from "./Alert.svelte";
-  import { resolveTokenFgColor } from "../../storybook-utils.js";
-
-  const { Story } = defineMeta({
-    title: "Patterns/Alert",
-    component: Alert,
-    tags: ["autodocs"],
-  });
-</script>
-
-<Story name="Ok" args={{ variant: "ok", title: "Build successful", message: "All rails nominal." }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const root = canvas.getByRole("status");
-    await expect(root).toBeVisible();
-    await expect(canvas.getByText("Build successful")).toBeVisible();
-    await expect(canvas.getByText("All rails nominal.")).toBeVisible();
-    const tag = canvas.getByText("ok");
-    await expect(tag).toHaveAttribute("aria-hidden", "true");
-    const okColor = resolveTokenFgColor("--ok");
-    await expect(getComputedStyle(root).borderLeftColor).toBe(okColor);
-  }} />
-
-<Story name="Amber" args={{ variant: "amber", title: "High load", message: "+12V rail at 88%." }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const root = canvas.getByRole("status");
-    await expect(root).toBeVisible();
-    await expect(canvas.getByText("High load")).toBeVisible();
-    const amberColor = resolveTokenFgColor("--amber");
-    await expect(getComputedStyle(root).borderLeftColor).toBe(amberColor);
-  }} />
-
-<Story name="Danger" args={{ variant: "danger", title: "Thermal fault", message: "Over-temperature protection triggered." }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const root = canvas.getByRole("status");
-    await expect(root).toBeVisible();
-    await expect(canvas.getByText("Thermal fault")).toBeVisible();
-    const dangerColor = resolveTokenFgColor("--danger");
-    await expect(getComputedStyle(root).borderLeftColor).toBe(dangerColor);
-  }} />
-
-<Story name="Info" args={{ variant: "info", title: "Firmware update available", message: "v2.1.0 → v2.2.0." }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const root = canvas.getByRole("status");
-    await expect(root).toBeVisible();
-    const cyanColor = resolveTokenFgColor("--cyan");
-    await expect(getComputedStyle(root).borderLeftColor).toBe(cyanColor);
-  }} />
-
-<Story name="No Message" args={{ variant: "ok", title: "Status OK" }}
-  play={async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const root = canvas.getByRole("status");
-    await expect(root).toBeVisible();
-    await expect(canvas.getByText("Status OK")).toBeVisible();
-    await expect(canvasElement.querySelector(".alert-msg")).toBeNull();
-  }} />

package/dist/components/patterns/Alert.svelte

@@ -1,91 +0,0 @@
-<script lang="ts">
-  import type { HTMLAttributes } from 'svelte/elements'
-  import type { Snippet } from 'svelte'
-  import Stack from '../layout/Stack.svelte'
-
-  type AlertVariant = 'ok' | 'amber' | 'danger' | 'info'
-
-  interface Props extends HTMLAttributes<HTMLDivElement> {
-    /** Colour variant — drives the tag glyph and border accent. @default 'info' */
-    variant?: AlertVariant
-    /** Bold title text shown in the alert header. */
-    title: string
-    /** Body message text. */
-    message?: string
-    children?: Snippet
-    [key: string]: unknown
-  }
-
-  let {
-    variant = 'info',
-    title,
-    message,
-    children,
-    ...rest
-  }: Props = $props()
-
-  const TAG_GLYPHS: Record<AlertVariant, string> = {
-    ok: 'ok',
-    amber: '!!',
-    danger: 'err',
-    info: 'inf',
-  }
-</script>
-
-<div class="alert alert--{variant}" role="status" {...rest}>
-  <span class="alert-tag" aria-hidden="true">{TAG_GLYPHS[variant]}</span>
-  <Stack gap="sm">
-    <span class="alert-title">{title}</span>
-    {#if message}
-      <span class="alert-msg">{message}</span>
-    {/if}
-    {@render children?.()}
-  </Stack>
-</div>
-
-<style>
-  .alert {
-    display: flex;
-    align-items: flex-start;
-    gap: 12px;
-    padding: 12px 16px;
-    border-left: 2px solid;
-    font-size: var(--t-body);
-    line-height: 1.5;
-  }
-
-  .alert--ok     { border-color: var(--ok);     background: color-mix(in srgb, var(--ok)     8%, transparent); }
-  .alert--amber  { border-color: var(--amber);  background: color-mix(in srgb, var(--amber)  8%, transparent); }
-  .alert--danger { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
-  .alert--info   { border-color: var(--cyan);   background: color-mix(in srgb, var(--cyan)   8%, transparent); }
-
-  .alert-tag {
-    font-family: var(--mono);
-    font-size: var(--t-micro);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-    flex-shrink: 0;
-    margin-top: 2px;
-  }
-  .alert--ok     .alert-tag { color: var(--ok); }
-  .alert--amber  .alert-tag { color: var(--amber); }
-  .alert--danger .alert-tag { color: var(--danger); }
-  .alert--info   .alert-tag { color: var(--cyan); }
-
-  .alert-title {
-    font-family: var(--mono);
-    font-size: var(--t-micro);
-    letter-spacing: 0.08em;
-    text-transform: uppercase;
-  }
-  .alert--ok     .alert-title { color: var(--ok); }
-  .alert--amber  .alert-title { color: var(--amber); }
-  .alert--danger .alert-title { color: var(--danger); }
-  .alert--info   .alert-title { color: var(--cyan); }
-
-  .alert-msg {
-    font-size: var(--t-mono);
-    color: var(--ink-dim);
-    line-height: 1.5;
-  }
-</style>