@thewhatmatters/wmds 0.4.8 → 0.4.27

package/CHANGELOG.md

@@ -7,6 +7,288 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.27
+
+**An opt-in counter for the Carousel.**
+
+- **Carousel** `counter` (new, default `false`) — a visible "1 of 6" under the row on `type-supporting`, `text-muted`, tabular figures; announced politely (`aria-live="polite"`) as the item the row rests on changes; hidden (keeping its space) while every item fits. `labels.counter(position, count)` words it.
+- **Carousel** `onIndexChange(index, count)` (new) — 0-based; fires once the row has been still for a moment and the item it rests on has changed. At the end of the row the index is the last item.
+- **Carousel** `activeIndex` (new) — controlled: the row moves to that item (0-based) when it changes; the first value is applied without a glide.
+- With none of the new props, the markup and behavior are unchanged.
+- Stories: **Carousel → Review — 390 counter** and **Reference — count outside the row**. See the ADR-0043 addendum.
+
+### Consumer actions
+
+None. To show the count, pass `counter`; to show it elsewhere, pass `onIndexChange`. No **Pattern — …** Show code changed.
+
+## 0.4.26
+
+**A side sheet with header actions, a phone layout, and URL state.**
+
+- **Sheet** `Sheet.Content` `headerActions` (new) — controls before the close (**IconButton** `size="sm"`: previous / next, share).
+- **Sheet** `side="end"` is **full-screen below `md`** (no inset, no radius; header and footer pinned, body scrolls, footer clears the home indicator). From `md` it is a rail over a lighter scrim (`bg-overlay/50`). The page behind is `inert` while open; closing a deep-linked sheet moves focus to `main`; reduced motion fades instead of sliding.
+- **`useSheetParam(kind, { initialUrl? })`**, **`readSheetParam(url)`**, **`withSheetParam(url, id | null, kind)`** (new) — keep a sheet in `?sheet=<kind>&id=<id>` with the History API, no router. Back closes; a deep link opens on first render; `initialUrl` serves the open sheet from the server.
+- New patterns: **Components/Sheet → Pattern — side sheet**, **Pattern — side sheet header actions**, **Pattern — side sheet URL deep link**; **Components/Table → Pattern — approvals with sheet**.
+- See ADR-0049.
+
+### Consumer actions
+
+None required. Every `side="end"` **Sheet**, including **SiteNav**'s phone menu, is now full-screen below `md`; check a phone width. To keep a detail in the URL, wire `useSheetParam` as in **Pattern — side sheet URL deep link** (new patterns, nothing to re-copy).
+
+## 0.4.24
+
+**One focus ring on TextArea and Input.**
+
+- **TextArea** and **Input** no longer show a second ring. The shell's ring sat 2px off the border behind a page-colored gap, so it read as a gray ring around the field's own edge. The ring now hugs the border, one `--color-focus-ring` (or status ring) token, for solo and validation shells.
+- The inner field of **TextArea**, **Input**, **PromptBar** and **CopyField** drops its outline and ring with `!important`. A global `:focus-visible { outline }` rule in an app is unlayered and used to beat the component's layered `outline-none`, which painted a blue ring inside the shell.
+- New **Components/TextArea → Focused** story.
+
+### Consumer actions
+
+None.
+
+## 0.4.23
+
+**The package loads under Node, and TextArea announces progress.**
+
+- **Fixed:** importing `@thewhatmatters/wmds` in Node ESM (a node test runner, or vitest in a DOM environment) threw `SyntaxError: Named export 'Rive' not found`. `@rive-app/react-canvas` is CommonJS, and **RiveHand** imported it by name; Node only exposes `default` for a CommonJS module. **RiveHand** now reads the runtime from the namespace and falls back to `default`, so bundlers (Vite, Next) and Node both load it. The `motion` imports were not the cause. The build now imports `dist/index.js` in Node, and a unit test does the same.
+- **TextArea** `liveStatus` (new) — progress text under the field, in a polite live region (`role="status"`, `aria-live="polite"`). Pass `""` when idle so the region stays mounted and "Saving…" / "Saved" are heard. It is separate from the validation `status` + `message`. `description` and `message` were already tied to the field with `aria-describedby`; tests now cover it.
+- **Pattern — save status** is new on **Components/TextArea**.
+
+### Consumer actions
+
+None. To announce a save state, pass `liveStatus`. Copy **Components/TextArea → Pattern — save status** (`docs/patterns/components-textarea--save-status.tsx`) for a worked example.
+
+## 0.4.22
+
+**A pinned sidebar footer, and AppShell on the server.**
+
+- **AppShell** `sidebarFooter` / **AppShell.SidebarFooter** (new) — pinned to the bottom of the sidebar column and the phone **Sheet**. The **NavList** scrolls on its own above it, so a theme switch stays visible at 1440x900 and on a phone. No new color, border, radius, or shadow.
+- **Pattern — portal dashboard** now puts a **DisplayControls** `controls="theme"` switch in the footer.
+- Documented: the phone toggle's accessible name is **"Menu"** (`labels.menu`), and the docs now say which parts render on the server, which need a `"use client"` boundary, that `displayThemeNoFlashScript` goes in `<head>`, and a Next.js App Router example (`docs/component-contracts.md → AppShell — server rendering`).
+- See the ADR-0047 addendum.
+
+### Consumer actions
+
+None for existing shells. To pin a footer, pass `sidebarFooter`. Re-copy **Components/AppShell → Pattern — portal dashboard** (`docs/patterns/components-appshell--portal-dashboard-pattern.tsx`) to get the theme switch in the footer.
+
+## 0.4.21
+
+**A table.**
+
+- **Table** (new, atom) — `Table`, `TableHeader`, `TableBody`, `TableFooter`, `TableRow`, `TableHead`, `TableCell`, `TableCaption`. Semantic HTML in a focusable, horizontal-scroll `region`. No new color, radius, shadow, or variant.
+- Patterns: **Components/Table → Pattern — basic table** and **Pattern — approvals queue** (Approve `primary`, Deny `outline`, an inline Confirm deny / Cancel step in the same row, then a success or failed status pill; keyboard focus follows, Escape cancels, and each button's `aria-label` carries the row name). States: deny confirm step, decided, empty, mobile 390.
+- **Table** polish: headers use `ui-label` and the caption `body` (one step up), `sticky` on `TableHead` / `TableCell` pins a column to the start edge (existing `bg-body` surface), and a table with a `colgroup` lays out from its `col` widths (fixed layout) so an empty and a filled table match.
+- **Pattern — approvals queue**: the row keeps one height through pending, confirm, and decided (44px decision slot); focus after a decision lands on the status pill and shows the `focus-ring` only for keyboard focus (no box after a mouse click); the Name column is sticky; a `colgroup` fixes the column widths for the filled and empty states.
+- **Pattern — approvals queue** on a phone (below `sm`, 640px): each row stacks as an outlined **Card** — name, then type and waiting, then **Approve** and **Deny** each taking half the row, all visible without sideways scroll. The deny confirm stays inline (Confirm deny · Cancel in the same slot) and the 44px decision slot keeps the card one height through pending, confirm, and decided. From `sm` the table is unchanged. No new color, radius, shadow, or Button role.
+- `Table` moves out of the planned list.
+- See ADR-0048.
+
+### Consumer actions
+
+None for existing pages. If you pasted **Pattern — approvals queue** from an earlier draft, re-copy `docs/patterns/components-table--approvals.tsx` (**Pattern — approvals queue** changed: phone card layout; it now also imports `Card`). To adopt it, `import { Table } from "@thewhatmatters/wmds"` and paste a **Components/Table** pattern (`docs/patterns/components-table--basic.tsx`, `docs/patterns/components-table--approvals.tsx`).
+
+## 0.4.20
+
+**An app shell.**
+
+- **AppShell** (new) — a sidebar on the page background and the page as an inset, raised surface with a title bar. It composes **NavList**, **PageHeader** `variant="app"`, **Sheet** (the sidebar below `lg`), and **Panel** (the optional aside). No new color, radius, shadow, or variant.
+- `<AppShell title brand sidebar header aside>` or the slots **AppShell.Brand**, **Sidebar**, **Header**, **Aside**. A `PanelLeft` toggle collapses the sidebar, **Ctrl** / **⌘** + **B** does the same, and `useAppShell()` returns the state.
+- Patterns: **Components/AppShell → Pattern — portal dashboard**. States: collapsed, aside open, phone, phone menu open.
+- **PageHeader** now applies `aria-label` when `title` is also set (it used to drop it), so a page header can have a name that tells it apart from other banners.
+- **Sheet**, **Panel**, **Dialog**, and **AlertDialog** headers carry `role="presentation"`, so an open overlay no longer adds a second `banner` landmark beside the page header.
+- See ADR-0047.
+
+### Consumer actions
+
+None for existing pages. To adopt it, `import { AppShell } from "@thewhatmatters/wmds"` and paste **Components/AppShell → Pattern — portal dashboard** (`docs/patterns/components-appshell--portal-dashboard-pattern.tsx`).
+
+## 0.4.19
+
+**A chart beside a stat column.**
+
+- **Pattern — revenue by line** composes **Chart.Cartesian** and a column of **Stat** inside a **Card**. No new component.
+- The same pattern includes the unwired state: "Revenue by line is not wired". Do not draw a series until the source exists.
+
+### Consumer actions
+
+Paste **Components/Chart → Pattern — revenue by line** (`docs/patterns/components-chart--revenue-by-line.tsx`). Keep the unwired card until revenue by line is connected. Drop it once `data` is real.
+
+## 0.4.18
+
+**A log viewer, and a dark detail pane.**
+
+- **LogView** (new) — line numbers, a tabular line count, **Copy**, and **Follow**. `follow` keeps the scroller on the last line. `loading` is a **Skeleton**. An empty log says "No log lines".
+- **Stat** `detail` — one tabular line under the figure, for example "3 new". Hidden while `loading` or `unavailable`. Hero props (`size="lg"`, `context`, `icon`, `action`, `unavailable`) stay.
+- Patterns: **Components/LogView → Pattern — log viewer**, **Pattern — detail pane** (prev/next, tags, a 2×2 stat grid, the log, on `data-theme="dark"`).
+
+### Consumer actions
+
+`import { LogView } from "@thewhatmatters/wmds"`. Paste **Components/LogView → Pattern — log viewer** (`docs/patterns/components-logview--log-viewer.tsx`) and **Pattern — detail pane** (`docs/patterns/components-logview--detail-pane.tsx`). Pass `detail` on **Stat** for the sub line. Existing hero stats keep `size`, `context`, `icon`, `action`, and `unavailable`.
+
+## 0.4.17
+
+**Card.Body can be a terminal frame.**
+
+- **`Card.Body variant="terminal"`** is a dark embed. `data-theme="dark"` on the frame uses the existing dark tokens, so the surface stays dark in both page themes. No new color.
+- `src` or `srcDoc`, `title`, `height` (`sm` | `md` | `lg` | `fill`), `readOnly` (muted **Read only** badge), `state` (`ready` | `loading` | `disconnected`).
+- `bodyTerminal` is unchanged: it only densifies the shell bottom when Body has no Footer. A terminal frame sits flush to the bottom of a footerless card.
+- Pattern: **Components/Card/Card → Pattern — terminal frame**.
+
+### Consumer actions
+
+Replace a hand-rolled iframe in **Card.Body** with `variant="terminal"`. Paste **Components/Card/Card → Pattern — terminal frame** (`docs/patterns/components-card-card--terminal-frame.tsx`). `bodyTerminal` still means footerless density — do not use it as the embed.
+
+## 0.4.16
+
+**DisplayControls can be a theme switch, with a no-flash snippet.**
+
+- **DisplayControls** `controls="theme"` drops the grid button. **G** is not captured. **T** still cycles Auto → Light → Dark.
+- `readDisplayTheme`, `persistDisplayTheme`, `applyDisplayTheme`, `commitDisplayTheme`, and `subscribeDisplayTheme` remember the choice under `wmds-theme` and set or clear `data-theme` on `<html>`. `light` clears the attribute. `dark` sets it. `auto` follows `prefers-color-scheme` and keeps listening until the next call. `useSyncExternalStore(subscribeDisplayTheme, readDisplayTheme, …)` reads the saved choice without a hydration mismatch.
+- `displayThemeNoFlashScript` is the head snippet that reads the same key before paint. Paste it before the stylesheet.
+- Pattern: **Components/DisplayControls → Pattern — theme switch**.
+
+### Consumer actions
+
+Paste `displayThemeNoFlashScript` in `<head>` before the stylesheet (a `<script>` whose text is that string). Render **DisplayControls** with `controls="theme"` and call `commitDisplayTheme` from `onThemeChange`. Paste **Components/DisplayControls → Pattern — theme switch** (`docs/patterns/components-displaycontrols--theme-switch.tsx`).
+
+Existing grid + theme pages keep `controls` omitted. **Pattern — page display controls** is unchanged.
+
+## 0.4.15
+
+**TaskRows: a needs-you table.**
+
+- **TaskRows** `variant="table"` (new) — columns of title, waiting, and metric. Not an accordion. `columns` is `{ id: "title" | "waiting" | "metric", header, align?, width? }`. Defaults are Item, Waiting, and Metric.
+- **TaskRows.Row** (new) — `title`, `href` or `render` (a router link; `render` wins), `status` (`tone`, `label` such as "Open · 2d", `pulsing`), `waiting` (a muted **Badge** pill and a detail line), `metric` (`value` is tabular, plus `detail`).
+- `source` — `ready` (default), `loading` (skeleton, `aria-busy`), `error` (the `note` in the destructive color), `unwired` (the `note` as a muted footer line, no fake metric).
+- `empty` — shown when there are no rows. Defaults to "Nothing waiting".
+- Below `md` the headers are visually hidden and each row is two lines: the title, then the status, the waiting detail, and the metric.
+- Pattern: **Components/TaskRows → Pattern — needs you**.
+
+### Consumer actions
+
+None for existing **TaskRows** lists and capsules.
+
+For a needs-you table, paste **Components/TaskRows → Pattern — needs you** (`docs/patterns/components-taskrows--needs-you-table.tsx`). Pass `source="unwired"` and `note` when a source is not connected. Do not invent a zero.
+
+## 0.4.14
+
+**Chart: a segmented progress ring, a tabular legend, and a SegmentedBar that renders before it is measured.**
+
+- **Chart.SegmentedRing** (new) — radial capacity meter. `value` / `max`, `segments` (default 72), `tone`, `centerValue`, `centerLabel`, `size` (`sm` 96px, `md` 160px, `lg` 192px), `animate` (`initial` sweeps on mount, `none` holds the fill), `label`. The figure is tabular. A fixed viewBox, so the ticks are in the server HTML.
+- Over capacity — a value above `max` fills every tick and shows "Over capacity". The arc does not grow past the ring.
+- `unavailable` — `{ reason, label? }` empties the track and replaces the center with muted "Not connected" (or `label`) and the reason. Do not pass a zero for an unwired source.
+- Reduced motion — no sweep. The server render is the settled fill, so hydration matches.
+- **Chart.Legend** `variant="tabular"` (new) — one row: swatch, label, mono value, percent, delta. `config` entries take optional `value`, `percent`, and `delta` (`{ label, direction?: "up" | "down" | "flat" }`). `up` is success, `down` is destructive, `flat` is muted. The default `series` variant is unchanged.
+- **Chart.SegmentedBar** — draws CSS ticks when the host width is still 0 (server HTML and the first client render). The measured SVG, including `fill="velocity"` and `fill="semantic"`, replaces them once the width is known. `animate="initial"` still springs that SVG.
+- Pattern: **Components/Chart → Pattern — segmented ring**.
+
+### Consumer actions
+
+None for existing **Chart.Legend** rows or **Chart.SegmentedBar** props.
+
+**Chart.SegmentedBar** now shows ticks before hydration. A client island is no longer required for the meter to appear. `animate="initial"` still springs once the bar has a width.
+
+For a radial meter and a source breakdown, paste **Components/Chart → Pattern — segmented ring** (`docs/patterns/components-chart--segmented-ring-pattern.tsx`). Pass `unavailable={{ reason }}` when the source is unwired.
+
+## 0.4.13
+
+**NavList: link rows, a trailing mark, a section action, and an app sidebar.**
+
+- **NavList** item `href` (new) — the row is an anchor, so a server-rendered app navigates without mapping `onSelect` to a router. `render={<Link href="/tasks/ikea" />}` (new) is the router link. Pass one. If both are set, `render` is used.
+- `trailing` (new) — a **Status** dot or a **Badge** `status` pill at the end of the row. Counts stay tabular beside it.
+- Section `action` (new) — an **IconButton** for filter or more, in the section label row.
+- **Button** `layout="nav"` accepts `render`, the same way a pill does. A selected link sets `aria-current="page"`.
+- Pattern: **Components/NavList → Pattern — app sidebar** — brand row, **Search**, sections, a footer slot, and below `lg` a **Sheet** `side="start"` opened from a menu **IconButton** in **PageHeader** `variant="app"`.
+
+### Consumer actions
+
+None for existing button rows.
+
+To navigate from a row: pass `href` or `render`. Paste **Components/NavList → Pattern — app sidebar** (`docs/patterns/components-navlist--app-sidebar.tsx`) for the sidebar and the phone sheet.
+
+## 0.4.12
+
+**Badge: a status pill for run state, cadence, and freshness.**
+
+- **Badge** `status` (new) — `active` | `idle` | `success` | `failed` | `warning`. A pill at cluster height (28px `sm`, 36px `md`) with tabular figures. `active` uses `bg-brand-tint` and `text-brand-outline` (navy `#011272` in light, the lifted navy in dark). The others use the existing muted fills. Not with `count`, `iconOnly`, or `avatar`.
+- `dot` (new) — an 8px mark on a status pill. It pulses when `status` is `active`. Reduced motion holds it still. The mark is Badge's own dot, not the **Status** component.
+- `icon` on a status pill leads cadence ("Every 2 days") and freshness ("Last checked 1d ago").
+- Plain label badges stay on the 20 / 24px shell.
+- Pattern: **Components/Badge → Pattern — status pill**.
+
+### Consumer actions
+
+None for existing badges.
+
+For a routine's state: `<Badge status="active" dot>Active</Badge>`, and `<Badge status="idle" icon={<Calendar />}>Every 2 days</Badge>`. Paste **Components/Badge → Pattern — status pill** (`docs/patterns/components-badge--status-pill.tsx`).
+
+## 0.4.11
+
+**Stat: a hero figure with a visible "vs" line.**
+
+- **Stat** `size="lg"` (new) — the figure is `type-display-3` with tabular numbers. The label is sentence case. `sm` and `md` are unchanged.
+- `context` (new) — a visible secondary line under the figure, tabular, for "vs $14,850" or "of $1M goal". `trend.label` stays a tooltip on the badge.
+- `icon` (new) — a leading Lucide glyph in a brand-tint tile (**ButtonIcon**). The glyph uses `text-brand-outline`, which is navy (`#011272`) in light and the lifted navy in dark.
+- `action` (new) — label-row slot. Pass **Button** `size="sm"` ("View details").
+- `unavailable` (new) — `{ reason, label? }` replaces the figure with muted "Not connected" (or `label`) and the reason. `trend` and `context` stay hidden. Do not fake a zero.
+- `trend.direction` accepts `flat`, the same muted badge as `neutral`.
+- `loading` still sets `aria-busy` and a **Skeleton**. `lg` adds a third bar for the context line.
+- Pattern: **Components/Stat → Pattern — hero stat**.
+
+### Consumer actions
+
+None for existing **Stat** tiles.
+
+For a hero KPI with a visible comparison: `size="lg"`, `context="vs $14,850"`, optional `icon` and `action`. Paste **Components/Stat → Pattern — hero stat** (`docs/patterns/components-stat--hero-stat.tsx`). When the source is unwired, pass `unavailable={{ reason }}` instead of a zero.
+
+## 0.4.10
+
+**CopyField: a read-only value with a Copy key button.** For copying an API key. See **ADR-0045**.
+
+- **CopyField** (new) — a read-only monospace value and a **Button** `role="secondary"` `size="sm"` labeled "Copy key", seated at the trailing end of **PromptBar**'s pill. **Input** is `inline` `mono` (`type-code`) and truncates, so a long key does not run under the button. A click copies `value` and the label switches to "Copied" for `buttonStatusHoldMs` (2s), announced from the button's polite live region, then returns. The button is in the tab order (Enter and Space). Focusing the value selects it. If the Clipboard API is missing or blocked, the field selects the value, tries `execCommand('copy')`, and shows "Press Cmd/Ctrl+C to copy." in a polite status. The value is never logged.
+- **Input** `mono` (new, optional) — the same monospace face, for a read-only key or id. Existing inputs are unchanged.
+- `state` (`"copied"` | `"fallback"`) pins that appearance for a specimen. Omit it in the app.
+- Patterns: **Components/CopyField → Pattern — copy key**, **Pattern — copied**, **Pattern — clipboard blocked**.
+- **On a navy field** — `data-theme="dark"` does not belong on `bg-brand`. Dark surfaces are `#262626`, about 1:1 on `#011272`, so the pill and a secondary button disappear. The label and the clipboard hint inherit the section color instead of `text-fg` / `text-muted`. The pill stays a surface. **Button** `role="inverse-outline"` is the on-brand hairline (`--color-on-brand`, no new color). The filled action stays `role="inverse"`. See **ADR-0046**. Paste **Components/CopyField → Pattern — on a navy field**.
+
+### Consumer actions
+
+None for existing apps on a light surface.
+
+On a brand-navy section: wrap it in `bg-brand text-on-brand`. Do not set `data-theme="dark"` on that section. Paste **Components/CopyField → Pattern — on a navy field** (`docs/patterns/components-copyfield--on-navy.tsx`): `<CopyField label="API key" value={apiKey} />`, **Button** `role="inverse"` for the filled action, `role="inverse-outline"` for the hairline. Do not log the key, and do not pass `state`.
+
+To copy an API key on a light surface: `import { CopyField } from "@thewhatmatters/wmds"` and render `<CopyField label="API key" value={apiKey} />`. Paste **Components/CopyField → Pattern — copy key** (`docs/patterns/components-copyfield--copy-key.tsx`). Do not log the key, and do not pass `state`.
+
+## 0.4.9
+
+**Fixes from the site's 0.4.8 upgrade: router links in every page pattern, a tighter tile caption, and a checker that no longer skips files.**
+
+- **`renderLink` on the page patterns** — one prop name everywhere, for links the app's router should handle. Without it they were plain anchors that reload the page, and swapping one in the pasted markup reads as drift.
+  - **Guides/Filter panel → Pattern — filtered index**: `renderLink={(post) => <Link href={post.href} />}` (new) — post titles.
+  - **Guides/Post page → Pattern — post page**: `renderLink={(link) => <Link href={link.href} />}` (new) — the **Breadcrumb** and the category tags. View as Markdown and the share links stay plain anchors.
+  - **Guides/Resource detail → Pattern — resource detail**: `renderLink={(item) => <Link href={item.href} />}` (new) on `ResourceDetailPage` — the **Breadcrumb**.
+  - **Pattern — filtered grid** already had it, for tiles.
+- **IndexList.Item** `render` (new) — `render={<Link href="/blog/post" />}` in place of `href`, the same shape as **LinkTile** and **Badge**. `href` is now optional.
+- **TextLink** `render` (new) — the same, for any text link. `href` is now optional; pass one or the other.
+- **`type-caption`** (new type step; `typographyClass("caption-tight")`) — `type-supporting`'s size and weight on a 16px line. For a single line directly under a label; not for wrapped text, which stays on `type-supporting`. In this release it is used on **LinkTile**'s meta line only. **Foundations → Typography** lists it.
+- **LinkTile** — the title and the meta line sit as a pair: no gap between them, and the meta line is on `type-caption`. The space between the title's text and the meta's goes from about 9px to about 5px. The 12px between the image and the title and the two-line clamp are unchanged. A tile with a meta line is 6px shorter. The `loading` placeholder's bars sit in the same 20px and 16px lines, so a placeholder is exactly as tall as a loaded tile with a one-line title.
+- **`wmds-check`** — finds a pasted pattern's header when a `"use client"` or `"use server"` directive (or blank lines) comes before it. It read line 1 only, so such a file was skipped silently and never checked for drift. Findings name the header's line.
+- **0.4.8 Consumer actions corrected** — they said to put `"use client"` above the pattern header. The header goes first and the directive below it, as the `use-wmds` skill says. Both orders now work with `wmds-check`.
+- **TileGrid docs** — the space under a masonry tile is the 2rem row gap plus less than 4px (32px to just under 36px), not "within 3px". A tile's height rounds up to the next 4px row track. The behavior has not changed.
+
+### Consumer actions
+
+Re-copy three patterns, then pass the app's link through `renderLink`. Do the wiring in a client component (a function cannot cross from a server component), and remove any `<Link>` added to pasted markup.
+
+1. **Re-copy Guides/Filter panel → Pattern — filtered index** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-index.tsx`) over `components/blog-index.tsx`, re-apply your content, data, and handlers, and pass `renderLink={(post) => <Link href={post.href} />}` to `<FilteredIndex>`.
+2. **Re-copy Guides/Post page → Pattern — post page** (`…/docs/patterns/guides-post-page--post-page.tsx`) over `components/post-page.tsx`, re-apply your content, and pass `renderLink={(link) => <Link href={link.href} />}` to `<PostPage>`.
+3. **Re-copy Guides/Resource detail → Pattern — resource detail** (`…/docs/patterns/guides-resource-detail--detail.tsx`) over `components/resource-detail.tsx`, re-apply your content, and pass `renderLink={(item) => <Link href={item.href} />}` to `<ResourceDetailPage>`.
+4. **Pattern headers:** the header stays on the first lines with `"use client"` below it. A file with the directive first is now checked too, so `npx wmds-check` may report drift it skipped before. Fix the drift, or re-copy.
+5. **LinkTile:** nothing to do. Tiles with a meta line are 6px shorter. Update a screenshot baseline or a test that measures a tile's height. **Pattern — filtered grid** did not change; no re-copy.
+6. **`type-caption`:** do not move other text to it. It is for one line under a label.
+7. Other apps: none. `render` on **TextLink** and **IndexList.Item** is optional.
+
 ## 0.4.8
 
 **A filtered grid and a resource detail for a resources page.** Three new components and two page patterns: a tile that is one link, a grid that packs tiles in reading order, the filter panel as a component, and a resource's detail as a dialog over the grid or as its own page. The WhatMatters Resources page is the first use. See **ADR-0044**.
@@ -25,9 +307,9 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 
 ### Consumer actions
 
-1. **WhatMatters site, Resources page: use the new grid.** Copy **Guides/Filter panel → Pattern — filtered grid** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-grid.tsx`) into `components/resource-grid.tsx`, keep its header comment, and add `"use client"` above it. Each item is `{ id, title, href, image: { src, alt, width, height }, meta?, tag?, facets }` with `href: "/resources/<slug>"`; give every image its real `width` and `height`. Delete the hand-built list in `app/resources/page.tsx` and its classes.
+1. **WhatMatters site, Resources page: use the new grid.** Copy **Guides/Filter panel → Pattern — filtered grid** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-grid.tsx`) into `components/resource-grid.tsx`, keep its header comment as the first lines, and add `"use client"` below it. Each item is `{ id, title, href, image: { src, alt, width, height }, meta?, tag?, facets }` with `href: "/resources/<slug>"`; give every image its real `width` and `height`. Delete the hand-built list in `app/resources/page.tsx` and its classes.
 2. **Wire the grid in one small client file** (functions cannot cross from a server component): `components/resources.tsx` with `"use client"` renders `<FilteredGrid title="Resources" caption="Library" items={items} groups={groups} renderLink={(item) => <Link href={item.href} scroll={false} />} renderImage={(image) => <Image {...image} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" />} overlay={<SiteGridOverlay />} />`. `app/resources/page.tsx` loads the items and renders it. Change `sizes` if you change `columns`; allow the image hosts in `next.config.ts`. Do not edit the pasted file for any of this.
-3. **Add the detail.** Copy **Guides/Resource detail → Pattern — resource detail** (`…/docs/patterns/guides-resource-detail--detail.tsx`) into `components/resource-detail.tsx`, keep its header comment, and add `"use client"`. Each resource needs `{ id, title, image, video?: { src, poster, captions? }, category, tags?, meta?, note, added, addedLabel, visitHref, rows? }`.
+3. **Add the detail.** Copy **Guides/Resource detail → Pattern — resource detail** (`…/docs/patterns/guides-resource-detail--detail.tsx`) into `components/resource-detail.tsx`, keep its header comment as the first lines, and add `"use client"` below it. Each resource needs `{ id, title, image, video?: { src, poster, captions? }, category, tags?, meta?, note, added, addedLabel, visitHref, rows? }`.
 4. **Pick the form by route.**
    - The page: `app/resources/[slug]/page.tsx` renders `<ResourceDetailPage item={…} breadcrumb={[{ label: "Home", href: "/" }, { label: "Resources", href: "/resources" }, { label: item.title }]} overlay={<SiteGridOverlay />} />`. Delete `app/resources/[category]`: the categories become a filter group on the grid. No redirects.
    - The dialog: a parallel slot with an intercepting route (`app/resources/@detail/(.)[slug]/page.tsx`, a `default.tsx` that returns `null`, and `{detail}` in `app/resources/layout.tsx`) renders a client component with `<ResourceDetailDialog item={…} open onClose={() => router.back()} onPrevious={previous ? () => router.replace("/resources/" + previous.slug, { scroll: false }) : undefined} onNext={…} position={"3 of 9"} />`. Leave `onPrevious` out on the first resource and `onNext` out on the last.

package/CONSUMING.md

@@ -273,7 +273,7 @@ import {
 | `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
 | `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
 | `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |
-| `IndexList` | `captions`, `size`, `titleAs`, `empty`, `IndexList.Item` `meta` / `title` / `href` / `preview` | Components/IndexList — **Pattern — post index**. With filters: **Guides/Filter panel → Pattern — filtered index** |
+| `IndexList` | `captions`, `size`, `titleAs`, `empty`, `IndexList.Item` `meta` / `title` / `href` or `render` / `preview` | Components/IndexList — **Pattern — post index**. With filters: **Guides/Filter panel → Pattern — filtered index** |
 | `LinkTile` | `title`, `href` / `render`, `external`, `media`, `ratio`, `meta`, `tag`, `source`, `loading` | Components/LinkTile — **Pattern — resource tile**, **Pattern — router link** |
 | `TileGrid` | `layout` (`masonry` / `uniform`), `columns`, `empty`, `busy`, `TileGrid.Item` | Components/TileGrid — **Pattern — tile grid**. With filters: **Guides/Filter panel → Pattern — filtered grid** |
 | `FilterPanel` | `groups`, `selection`, `onSelectionChange`, `resultsLabel`, `labels`; `FilterPanel.Rail` / `.Trigger` / `.Sheet`; `useFilterSelection`, `matchesFilterSelection`, `countFilterOptions` | Components/FilterPanel — **Pattern — filter panel** |

package/README.md

@@ -48,7 +48,7 @@ npm run validate:composition  # molecules/organisms must compose atoms (CI)
 | Atoms | `Avatar`, `Badge`, `Button`, `Checkbox`, `IconButton`, `Input`, `Kbd`, `Radio`, `RiveHand`, `Skeleton`, `Status`, `Switch`, `TextArea`, `TextLink`, `Tooltip` |
 | Molecules | `Accordion`, `CalEmbed`, `Card`, `ChatQa`, `CheckboxGroup`, `Chip`, `DisplayControls`, `Dropdown`, `Field`, `FloatingActionButton`, `HeroIntro`, `IntakeForm`, `NavList`, `PageHeader`, `PillGroup`, `PromptBar`, `RadioGroup`, `Search`, `Select`, `SelectableCard`, `SegmentedControl`, `Stat`, `StepProgress`, `TaskRows`, `TextSequence` |
 | Organisms | `Carousel`, `Chart`, `Confetti`, `Dialog`, `FooterReveal`, `HeroTileStack`, `IntakeConfirmation`, `IntakeModal`, `MoreMenu`, `Panel`, `ScrollHorizontal`, `Sheet`, `SiteNav`, `Tab`, `Toast` |
-| Planned, not built | `Pagination`, `Table` |
+| Planned, not built | `Pagination` |
 
 The list is `src/package.manifest.ts`. `npm run build` fails when it and `src/index.ts` disagree.
 

package/bin/wmds-check.mjs

@@ -230,22 +230,26 @@ for (const file of files) {
   });
 
   // Pasted patterns.
-  const header = lines[0]?.match(/^\/\/ @thewhatmatters\/wmds@([\w.-]+) · (.+)$/);
+  // The header is the file's first comment line. A "use client" / "use server" directive or blank
+  // lines may come before it.
+  const headerIndex = lines.findIndex((line) => line.trim() !== "" && !/^\s*["']use (client|server)["'];?\s*$/.test(line));
+  const headerLine = headerIndex === -1 ? 0 : headerIndex;
+  const header = lines[headerLine]?.match(/^\/\/ @thewhatmatters\/wmds@([\w.-]+) · (.+)$/);
   const id = source.match(/\?path=\/story\/([\w-]+)/)?.[1];
   if (header && id && packageRoot) {
     const shipped = path.join(packageRoot, "docs", "patterns", `${id}.tsx`);
     if (!existsSync(shipped)) {
-      report(file, 1, "pattern-removed", "error", `pattern ${id} no longer ships in ${packageVersion} — see CHANGELOG.md`);
+      report(file, headerLine + 1, "pattern-removed", "error", `pattern ${id} no longer ships in ${packageVersion} — see CHANGELOG.md`);
     } else {
       if (header[1] !== packageVersion) {
-        report(file, 1, "pattern-stale", "warn", `pasted from ${header[1]}, installed ${packageVersion} — re-copy if CHANGELOG names it`);
+        report(file, headerLine + 1, "pattern-stale", "warn", `pasted from ${header[1]}, installed ${packageVersion} — re-copy if CHANGELOG names it`);
       }
       const shippedStructure = patternStructure(readFileSync(shipped, "utf8"));
       const pastedStructure = patternStructure(source);
       if (shippedStructure.join("\n") !== pastedStructure.join("\n")) {
         report(
           file,
-          1,
+          headerLine + 1,
           "pattern-drift",
           "warn",
           `markup or classes differ from docs/patterns/${id}.tsx (${firstDifference(shippedStructure, pastedStructure)}) — allowed edits are content, data, handlers, exports`,

package/dist/components/atoms/Badge/Badge.d.ts

@@ -1,8 +1,8 @@
 import type { ReactElement, ReactNode } from "react";
 import { type AvatarSize } from "../Avatar/Avatar";
-import { type BadgeEmphasis, type BadgeSize, type BadgeVariant } from "./badgeStyles";
-export type { BadgeEmphasis, BadgeSize, BadgeVariant } from "./badgeStyles";
-export { badgeEmphases, badgeVariants } from "./badgeStyles";
+import { type BadgeEmphasis, type BadgeSize, type BadgeStatus, type BadgeVariant } from "./badgeStyles";
+export type { BadgeEmphasis, BadgeSize, BadgeStatus, BadgeVariant } from "./badgeStyles";
+export { badgeEmphases, badgeStatuses, badgeVariants } from "./badgeStyles";
 /** Layout-only — not for colors, borders, or typography overrides. */
 export type BadgeLayoutClassName = string;
 /** Leading round image. `alt` is the Avatar name; pass `""` when the badge label already speaks the word. */
@@ -38,6 +38,13 @@ export interface BadgeProps {
     count?: number;
     /** Leading Lucide icon — label pattern, or required for `iconOnly`. Not with `avatar`. */
     icon?: ReactElement;
+    /**
+     * Status pill — run state (`active`), cadence, or freshness. Owns the fill:
+     * `active` is the brand-tint pill; the others are muted. Not with `count`, `iconOnly`, or `avatar`.
+     */
+    status?: BadgeStatus;
+    /** Leading 8px dot on a status pill. Pulses when `status` is `active`. */
+    dot?: boolean;
     /**
      * Leading round image — renders **Avatar** at `badgeAvatarSize` for this badge's `size`.
      * Mutually exclusive with `icon`, `iconOnly`, and `count`.
@@ -52,8 +59,9 @@ export interface BadgeProps {
 }
 /**
  * Short status, count, or category label — solid, muted, or outline semantic fills.
+ * `status` is the pill for run state, cadence, and freshness (a dot and an optional icon).
  * Pattern-first: label, count, icon + label, avatar + label, icon-only, muted and outline emphasis,
- * mono caps, and links (`render`).
+ * mono caps, links (`render`), and the status pill.
  */
-export declare function Badge({ children, variant, size, emphasis, mono, render, count, icon, avatar, iconOnly, id, className, }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ children, variant, size, emphasis, mono, render, count, icon, avatar, iconOnly, status, dot, id, className, }: BadgeProps): import("react").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

package/dist/components/atoms/Badge/Badge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAYL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,YAAY,EAClB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC5E,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE7D,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,6GAA6G;AAC7G,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,CAGzD,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mGAAmG;IACnG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AAiDD;;;;GAIG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,QAAkB,EAClB,IAAY,EACZ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,EAAE,EACF,SAAS,GACV,EAAE,UAAU,+BAiEZ"}
+{"version":3,"file":"Badge.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Badge/Badge.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,OAAO,EAAU,KAAK,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE3D,OAAO,EAiBL,KAAK,aAAa,EAClB,KAAK,SAAS,EACd,KAAK,WAAW,EAChB,KAAK,YAAY,EAClB,MAAM,eAAe,CAAC;AAEvB,YAAY,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AACzF,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AAE5E,sEAAsE;AACtE,MAAM,MAAM,oBAAoB,GAAG,MAAM,CAAC;AAE1C,6GAA6G;AAC7G,MAAM,WAAW,WAAW;IAC1B,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;CACb;AAED;;;GAGG;AACH,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,SAAS,EAAE,UAAU,CAGzD,CAAC;AAEF,MAAM,WAAW,UAAU;IACzB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,iEAAiE;IACjE,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,mGAAmG;IACnG,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,uFAAuF;IACvF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,0FAA0F;IAC1F,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0EAA0E;IAC1E,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,oDAAoD;IACpD,SAAS,CAAC,EAAE,oBAAoB,CAAC;CAClC;AA0DD;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,EACpB,QAAQ,EACR,OAAmB,EACnB,IAAW,EACX,QAAkB,EAClB,IAAY,EACZ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,QAAgB,EAChB,MAAM,EACN,GAAW,EACX,EAAE,EACF,SAAS,GACV,EAAE,UAAU,+BAmFZ"}

package/dist/components/atoms/Badge/Badge.js

@@ -1,80 +1,88 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { Avatar as t } from "../Avatar/Avatar.js";
-import { badgeAvatarLabelSizeClasses as n, badgeBaseClasses as r, badgeCountSizeClasses as i, badgeEmphases as a, badgeIconGapClasses as o, badgeIconOnlySizeClasses as s, badgeInteractiveClasses as c, badgeLabelSizeClasses as l, badgeSolidClasses as u, badgeSurfaceClasses as d, badgeVariants as f } from "./badgeStyles.js";
-import { BadgeIcon as p } from "./BadgeIcon.js";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
-import { useRender as g } from "@base-ui/react/use-render";
+import { badgeAvatarLabelSizeClasses as n, badgeBaseClasses as r, badgeCountSizeClasses as i, badgeEmphases as a, badgeIconGapClasses as o, badgeIconOnlySizeClasses as s, badgeInteractiveClasses as c, badgeLabelSizeClasses as l, badgeSolidClasses as u, badgeStatusDotClasses as d, badgeStatusDotToneClasses as f, badgeStatusSizeClasses as p, badgeStatusSurfaceClasses as m, badgeStatuses as h, badgeSurfaceClasses as g, badgeVariants as _ } from "./badgeStyles.js";
+import { BadgeIcon as v } from "./BadgeIcon.js";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useRender as x } from "@base-ui/react/use-render";
 //#region src/components/atoms/Badge/Badge.tsx
-var _ = {
+var S = {
 	sm: "xsm",
 	md: "sm"
 };
-function v(e) {
-	if ((e.render != null || e.mono) && (e.count != null || e.iconOnly) && console.warn("[WMDS Badge] `render` and `mono` apply to label, icon, and avatar badges — not `count` or `iconOnly`."), e.avatar && (e.icon || e.iconOnly || e.count != null) && console.warn("[WMDS Badge] `avatar` is mutually exclusive with `icon`, `iconOnly`, and `count`."), e.count != null && e.icon && console.warn("[WMDS Badge] `count` is mutually exclusive with `icon`."), e.iconOnly) {
+function C(e) {
+	if ((e.render != null || e.mono) && (e.count != null || e.iconOnly) && console.warn("[WMDS Badge] `render` and `mono` apply to label, icon, and avatar badges — not `count` or `iconOnly`."), e.avatar && (e.icon || e.iconOnly || e.count != null) && console.warn("[WMDS Badge] `avatar` is mutually exclusive with `icon`, `iconOnly`, and `count`."), e.count != null && e.icon && console.warn("[WMDS Badge] `count` is mutually exclusive with `icon`."), e.status && (e.count != null || e.iconOnly || e.avatar) && console.warn("[WMDS Badge] `status` is a label pill — not with `count`, `iconOnly`, or `avatar`."), e.dot && !e.status && console.warn("[WMDS Badge] `dot` applies to a `status` pill."), e.iconOnly) {
 		e.icon || console.warn("[WMDS Badge] `iconOnly` requires `icon`."), (e.count != null || e.children != null) && console.warn("[WMDS Badge] `iconOnly` is mutually exclusive with `children` and `count`.");
 		return;
 	}
 	e.children == null && e.count == null && console.warn("[WMDS Badge] Provide `children`, `count`, or `iconOnly` + `icon`.");
 }
-function y({ render: e, ...t }) {
-	return g({
+function w({ render: e, ...t }) {
+	return x({
 		render: e,
 		defaultTagName: "span",
 		props: t
 	});
 }
-function b({ children: a, variant: f = "neutral", size: g = "sm", emphasis: b = "solid", mono: x = !1, render: S, count: C, icon: w, avatar: T, iconOnly: E = !1, id: D, className: O }) {
-	v({
-		count: C,
-		icon: w,
-		avatar: T,
-		iconOnly: E,
+function T({ children: a, variant: h = "neutral", size: _ = "sm", emphasis: x = "solid", mono: T = !1, render: E, count: D, icon: O, avatar: k, iconOnly: A = !1, status: j, dot: M = !1, id: N, className: P }) {
+	C({
+		count: D,
+		icon: O,
+		avatar: k,
+		iconOnly: A,
 		children: a,
-		render: S,
-		mono: x
+		render: E,
+		mono: T,
+		status: j,
+		dot: M
 	});
-	let k = d(f, b), A = C != null && T == null, j = E && w != null && !A && T == null, M = T != null && !A && !j, N = w != null && !A && !j && !M;
-	return A ? /* @__PURE__ */ m("span", {
-		id: D,
-		className: e(r, k, i[g], O),
-		"data-variant": f,
-		"data-size": g,
-		"data-emphasis": b,
+	let F = D != null && k == null && j == null, I = A && O != null && !F && k == null && j == null, L = k != null && !F && !I && j == null, R = j != null && !F && !I && !L, z = O != null && !F && !I && !L, B = R && M, V = R ? m[j] : g(h, x);
+	return F ? /* @__PURE__ */ y("span", {
+		id: N,
+		className: e(r, V, i[_], P),
+		"data-variant": h,
+		"data-size": _,
+		"data-emphasis": x,
 		"data-pattern": "count",
-		children: C
-	}) : j ? /* @__PURE__ */ m("span", {
-		id: D,
-		className: e(r, u[f], s, O),
-		"data-variant": f,
+		children: D
+	}) : I ? /* @__PURE__ */ y("span", {
+		id: N,
+		className: e(r, u[h], s, P),
+		"data-variant": h,
 		"data-pattern": "icon-only",
 		"aria-hidden": !0,
-		children: /* @__PURE__ */ m(p, {
+		children: /* @__PURE__ */ y(v, {
 			size: "sm",
-			children: w
+			children: O
 		})
-	}) : /* @__PURE__ */ h(y, {
-		render: S,
-		id: D,
-		className: e(r, k, M ? n[g] : l[g], N && o[g], x && "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]", S != null && c, S != null && b === "outline" && "hover:border-fg", O),
-		"data-variant": f,
-		"data-size": g,
-		"data-emphasis": b,
-		"data-pattern": M ? "avatar" : N ? "icon" : "label",
-		"data-mono": x ? "" : void 0,
+	}) : /* @__PURE__ */ b(w, {
+		render: E,
+		id: N,
+		className: e(r, V, R ? p[_] : L ? n[_] : l[_], !R && z && o[_], T && "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]", E != null && c, E != null && x === "outline" && "hover:border-fg", P),
+		"data-variant": h,
+		"data-size": _,
+		"data-emphasis": R ? "muted" : x,
+		"data-pattern": R ? "status" : L ? "avatar" : z ? "icon" : "label",
+		"data-mono": T ? "" : void 0,
+		"data-status": R ? j : void 0,
 		children: [
-			M && T != null ? /* @__PURE__ */ m(t, {
-				name: T.alt,
-				src: T.src,
-				size: _[g]
+			L && k != null ? /* @__PURE__ */ y(t, {
+				name: k.alt,
+				src: k.src,
+				size: S[_]
 			}) : null,
-			N ? /* @__PURE__ */ m(p, {
-				size: g,
-				children: w
+			B ? /* @__PURE__ */ y("span", {
+				className: e(d, f[j], j === "active" && "animate-status-dot-pulse"),
+				"data-pulsing": j === "active" ? "" : void 0,
+				"aria-hidden": !0
+			}) : null,
+			z ? /* @__PURE__ */ y(v, {
+				size: _,
+				children: O
 			}) : null,
 			a
 		]
 	});
 }
 //#endregion
-export { b as Badge, _ as badgeAvatarSize, a as badgeEmphases, f as badgeVariants };
+export { T as Badge, S as badgeAvatarSize, a as badgeEmphases, h as badgeStatuses, _ as badgeVariants };

package/dist/components/atoms/Badge/badgeStyles.d.ts

@@ -4,6 +4,21 @@ export type BadgeVariant = (typeof badgeVariants)[number];
 export type BadgeSize = "sm" | "md";
 export declare const badgeEmphases: readonly ["solid", "muted", "outline"];
 export type BadgeEmphasis = (typeof badgeEmphases)[number];
+/** Run state, cadence, and freshness — a pill, not a new component. */
+export declare const badgeStatuses: readonly ["active", "idle", "success", "failed", "warning"];
+export type BadgeStatus = (typeof badgeStatuses)[number];
+/**
+ * Status-pill fills. `active` is brand navy through `bg-brand-tint` / `text-brand-outline`
+ * (navy in light, the lifted navy in dark). The others reuse muted badge fills.
+ */
+export declare const badgeStatusSurfaceClasses: Record<BadgeStatus, string>;
+/** 8px mark — same scale as Status `variant="dot"`, painted here so Badge stays an atom. */
+export declare const badgeStatusDotClasses = "inline-block size-2 shrink-0 rounded-full";
+export declare const badgeStatusDotToneClasses: Record<BadgeStatus, string>;
+/** Pulses on `active` only. Reduced motion clears it in global.css. */
+export declare const badgeStatusDotPulseClass = "animate-status-dot-pulse";
+/** Cluster heights so a status pill sits with Chip, not the 20px label badge. */
+export declare const badgeStatusSizeClasses: Record<BadgeSize, string>;
 /** Shared shell — Astryx-style compact pill labels. */
 export declare const badgeBaseClasses = "inline-flex shrink-0 items-center justify-center font-sans font-medium normal-case tracking-normal";
 /**

package/dist/components/atoms/Badge/badgeStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"badgeStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Badge/badgeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAIrE,eAAO,MAAM,aAAa,mEAAoE,CAAC;AAE/F,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,eAAO,MAAM,aAAa,wCAAyC,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,uDAAuD;AACvD,eAAO,MAAM,gBAAgB,uGACyE,CAAC;AAEvG;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM1D,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM1D,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM5D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CAG1F;AAED,sHAAsH;AACtH,eAAO,MAAM,gBAAgB,6FAC+D,CAAC;AAE7F;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAMnC,CAAC;AAEF,eAAO,MAAM,8BAA8B,oBAAoB,CAAC;AAEhE,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3D,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGjE,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG1D,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3D,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAE3E,8DAA8D;AAC9D,eAAO,MAAM,yBAAyB,+DACwB,CAAC;AAE/D,kFAAkF;AAClF,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAKhE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,YAAY,CAEnE;AAED,YAAY,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"badgeStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Badge/badgeStyles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AAKrE,eAAO,MAAM,aAAa,mEAAoE,CAAC;AAE/F,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,MAAM,MAAM,SAAS,GAAG,IAAI,GAAG,IAAI,CAAC;AAEpC,eAAO,MAAM,aAAa,wCAAyC,CAAC;AAEpE,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE3D,uEAAuE;AACvE,eAAO,MAAM,aAAa,6DAA8D,CAAC;AAEzF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAEzD;;;GAGG;AACH,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAMjE,CAAC;AAEF,4FAA4F;AAC5F,eAAO,MAAM,qBAAqB,8CAA8C,CAAC;AAEjF,eAAO,MAAM,yBAAyB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAMjE,CAAC;AAEF,uEAAuE;AACvE,eAAO,MAAM,wBAAwB,6BAA6B,CAAC;AAEnE,iFAAiF;AACjF,eAAO,MAAM,sBAAsB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG5D,CAAC;AAEF,uDAAuD;AACvD,eAAO,MAAM,gBAAgB,uGACyE,CAAC;AAEvG;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM1D,CAAC;AAEF,yEAAyE;AACzE,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM1D,CAAC;AAEF,qEAAqE;AACrE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,YAAY,EAAE,MAAM,CAM5D,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,aAAa,GAAG,MAAM,CAG1F;AAED,sHAAsH;AACtH,eAAO,MAAM,gBAAgB,6FAC+D,CAAC;AAE7F;;;GAGG;AACH,eAAO,MAAM,uBAAuB,QAMnC,CAAC;AAEF,eAAO,MAAM,8BAA8B,oBAAoB,CAAC;AAEhE,+EAA+E;AAC/E,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3D,CAAC;AAEF,oEAAoE;AACpE,eAAO,MAAM,mBAAmB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGzD,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,2BAA2B,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAGjE,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG1D,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,SAAS,EAAE,MAAM,CAG3D,CAAC;AAEF,kEAAkE;AAClE,eAAO,MAAM,wBAAwB,qCAAqC,CAAC;AAE3E,8DAA8D;AAC9D,eAAO,MAAM,yBAAyB,+DACwB,CAAC;AAE/D,kFAAkF;AAClF,wBAAgB,wBAAwB,CAAC,MAAM,EAAE,OAAO,GAAG,MAAM,CAKhE;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,MAAM,GAAG,KAAK,IAAI,YAAY,CAEnE;AAED,YAAY,EAAE,eAAe,EAAE,CAAC"}