@thewhatmatters/wmds 0.4.29 → 0.4.31

package/dist/typography.css

@@ -66,8 +66,8 @@
     var(--text-display-1-size-max)
   );
   --text-display-1-weight: var(--font-weight-bold);
-  --text-display-1-leading: 1.15;
-  --text-display-1-tracking: -0.04em;
+  --text-display-1-leading: 1.05;
+  --text-display-1-tracking: -0.03em;
 
   --text-display-2-size-min: 2rem;
   --text-display-2-size-max: 3.15rem;
@@ -77,7 +77,8 @@
     var(--text-display-2-size-max)
   );
   --text-display-2-weight: var(--font-weight-semibold);
-  --text-display-2-leading: 1.2;
+  --text-display-2-leading: 1.1;
+  --text-display-2-tracking: -0.02em;
 
   --text-display-3-size-min: 1.5rem;
   --text-display-3-size-max: 2.1875rem;
@@ -87,7 +88,8 @@
     var(--text-display-3-size-max)
   );
   --text-display-3-weight: var(--font-weight-semibold);
-  --text-display-3-leading: 1.24;
+  --text-display-3-leading: 1.15;
+  --text-display-3-tracking: -0.01em;
 
   /**
    * Hero — the one oversized moment on a marketing page (a poster headline). Fluid to 16vw:
@@ -97,7 +99,7 @@
   --text-display-hero-size: clamp(3.5rem, 16vw, 16rem);
   --text-display-hero-weight: var(--font-weight-bold);
   --text-display-hero-leading: 0.92;
-  --text-display-hero-tracking: -0.04em;
+  --text-display-hero-tracking: -0.03em;
 
   /** XL — big statement rows under a hero (section titles, price rows): 44px → 136px. */
   --text-display-xl-size: clamp(2.75rem, 9vw, 8.5rem);
@@ -105,9 +107,19 @@
   --text-display-xl-leading: 0.9;
   --text-display-xl-tracking: -0.03em;
 
+  /**
+   * Lead — the one paragraph under a page's H1 that sums the page up (Lead paragraph rule L7):
+   * about 1.2–1.3× the 17px reading body, regular weight. 18px on phones → 21px from about 1000px.
+   * Pair it with the 42rem measure (about 62 characters a line at 21px).
+   */
+  --text-lead-size: clamp(1.125rem, calc(1rem + 0.5vw), 1.3125rem);
+  --text-lead-weight: var(--font-weight-normal);
+  --text-lead-leading: 1.45;
+
   /* Body & UI */
   --text-large-size: var(--font-size-lg);
-  --text-large-weight: var(--font-weight-semibold);
+  /* Subtext at 1.5rem and below is regular, not bold (Randy, 2026-10-26). A knob: apps may set it. */
+  --text-large-weight: var(--font-weight-normal);
   --text-large-leading: 1.4118;
 
   --text-body-size: var(--font-size-base);
@@ -151,7 +163,7 @@
   --text-eyebrow-size: var(--font-size-sm);
   --text-eyebrow-weight: var(--font-weight-normal);
   --text-eyebrow-leading: 1.3333;
-  --text-eyebrow-tracking: 0.05em;
+  --text-eyebrow-tracking: 0.08em; /* Capitals take 0.08–0.12em (Eyebrow rule E3). */
 
   /** WMDS extension — fixed-height control shells (Button, Chip, Input). Phase 4 migrates atoms here. */
   --text-control-size: var(--font-size-base);
@@ -165,28 +177,32 @@
  * With no fallback (display-2/3 tracking, case), an unset knob leaves the inherited value alone.
  */
 @utility type-display-hero {
+  /* A long word breaks rather than widen its flex or grid track (Display rule D5, WCAG 1.4.10). */
+  overflow-wrap: anywhere;
   font-family: var(--font-display, var(--font-family-heading));
   font-size: var(--text-display-hero-size);
   font-weight: var(--font-display-weight, var(--text-display-hero-weight));
   line-height: var(--text-display-hero-leading);
   letter-spacing: var(--font-display-tracking, var(--text-display-hero-tracking));
   text-transform: var(--font-display-case);
-  overflow-wrap: break-word;
   text-wrap: balance;
 }
 
 @utility type-display-xl {
+  /* A long word breaks rather than widen its flex or grid track (Display rule D5, WCAG 1.4.10). */
+  overflow-wrap: anywhere;
   font-family: var(--font-display, var(--font-family-heading));
   font-size: var(--text-display-xl-size);
   font-weight: var(--font-display-weight, var(--text-display-xl-weight));
   line-height: var(--text-display-xl-leading);
   letter-spacing: var(--font-display-tracking, var(--text-display-xl-tracking));
   text-transform: var(--font-display-case);
-  overflow-wrap: break-word;
   text-wrap: balance;
 }
 
 @utility type-display-1 {
+  /* A long word breaks rather than widen its flex or grid track (Display rule D5, WCAG 1.4.10). */
+  overflow-wrap: anywhere;
   font-family: var(--font-display, var(--font-family-heading));
   font-size: var(--text-display-1-size);
   font-weight: var(--font-display-weight, var(--text-display-1-weight));
@@ -196,20 +212,24 @@
 }
 
 @utility type-display-2 {
+  /* A long word breaks rather than widen its flex or grid track (Display rule D5, WCAG 1.4.10). */
+  overflow-wrap: anywhere;
   font-family: var(--font-display, var(--font-family-heading));
   font-size: var(--text-display-2-size);
   font-weight: var(--font-display-weight, var(--text-display-2-weight));
   line-height: var(--text-display-2-leading);
-  letter-spacing: var(--font-display-tracking);
+  letter-spacing: var(--font-display-tracking, var(--text-display-2-tracking));
   text-transform: var(--font-display-case);
 }
 
 @utility type-display-3 {
+  /* A long word breaks rather than widen its flex or grid track (Display rule D5, WCAG 1.4.10). */
+  overflow-wrap: anywhere;
   font-family: var(--font-display, var(--font-family-heading));
   font-size: var(--text-display-3-size);
   font-weight: var(--font-display-weight, var(--text-display-3-weight));
   line-height: var(--text-display-3-leading);
-  letter-spacing: var(--font-display-tracking);
+  letter-spacing: var(--font-display-tracking, var(--text-display-3-tracking));
   text-transform: var(--font-display-case);
 }
 
@@ -255,11 +275,22 @@
   line-height: var(--text-heading-6-leading);
 }
 
+@utility type-lead {
+  font-family: var(--font-family-body);
+  font-size: var(--text-lead-size);
+  font-weight: var(--text-lead-weight);
+  line-height: var(--text-lead-leading);
+  /* No lone word on the last line (orphans); an explicit text-balance or text-wrap utility still wins. */
+  text-wrap: pretty;
+}
+
 @utility type-large {
   font-family: var(--font-family-body);
   font-size: var(--text-large-size);
   font-weight: var(--text-large-weight);
   line-height: var(--text-large-leading);
+  /* No lone word on the last line (orphans); an explicit text-balance or text-wrap utility still wins. */
+  text-wrap: pretty;
 }
 
 @utility type-body {
@@ -267,6 +298,8 @@
   font-size: var(--text-body-size);
   font-weight: var(--text-body-weight);
   line-height: var(--text-body-leading);
+  /* No lone word on the last line (orphans); an explicit text-balance or text-wrap utility still wins. */
+  text-wrap: pretty;
 }
 
 @utility type-label {
@@ -302,6 +335,8 @@
   font-size: var(--text-reading-size);
   font-weight: var(--text-reading-weight);
   line-height: var(--text-reading-leading);
+  /* No lone word on the last line (orphans); an explicit text-balance or text-wrap utility still wins. */
+  text-wrap: pretty;
 }
 
 @utility type-eyebrow {

package/docs/components.md

@@ -1,18 +1,18 @@
 # @thewhatmatters/wmds — component contracts
 
-Version 0.4.29. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
+Version 0.4.31. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
 
 Storybook paths such as **Components/Button/Button → Pattern — …** name a story; its Show code is in `patterns/` (see `patterns/index.json`). Longer contracts for FooterReveal, HeroTileStack, TextSequence, ScrollHorizontal, RiveHand, and PromptBar are in `component-contracts.md`. ADR numbers refer to decision records in the WMDS repository.
 
 - **Theme** lives in `src/theme/` — `colors.css` (semantic roles) + `theme.css` (Tailwind `@theme` bridge). Storybook is the source of truth, not Paper.
 - **Dark mode:** `[data-theme="dark"]` on `<html>` or any ancestor — same token names, swapped values in `colors.css`.
 - **Consuming apps:** use exported components and typed props; `className` for layout only — not re-theming. Page layout utilities (`gap`, `grid`, `max-w`) are fine between components.
-- **Theme tokens:** Semantic roles in **`src/theme/colors.css`**; typography in **`src/theme/typography.css`** (`type-*` utilities, geometric scale; **display-1/2/3** are fluid via `clamp` — display-1 hits **5rem** on desktop and scales down to **2.5rem** on mobile; above them **`type-display-hero`** (the one oversized moment, to 16vw) and **`type-display-xl`** (statement rows); every display step reads the brand-kit knobs `--font-display*`, CONSUMING.md → Brand kit); motion in **`src/theme/motion.css`**; page spine in **`src/theme/grid.css`** (`--grid-*`, `grid-page` / `band`, `--leading-base`). **`--spacing` stays 4px** — do not re-scale; baseline is 8px. See **ADR-0007**, **ADR-0008**, **ADR-0009**, **ADR-0010**, **DESIGN.md → Grid**. Use **`typographyClass()`** — not raw `text-sm` in document copy. **`type-eyebrow`** (`typographyClass("eyebrow")`) is the small uppercase mono caption for editorial labels — **SectionCaption**, **IndexList** captions, **DescriptionList** `variant="mono"` names; write the text in sentence case — the "/" marker comes from the component, `aria-hidden`. Not for app UI section labels (`overline`) or secondary text (`caption`). **`type-caption`** (`typographyClass("caption-tight")`, 12px on a 16px line) is a single line directly under a label — **LinkTile**'s meta line only, for now; never wrapped text, which stays on `caption` (`type-supporting`, 12px on 20px). **`type-reading`** (`typographyClass("reading")`, 17px at a 28px line) is long-form article text — **Prose** sets it; UI copy stays on `type-body`. A dotted hairline is **DescriptionList** `rule="dotted"`. See **ADR-0040**, **ADR-0041**.
+- **Theme tokens:** Semantic roles in **`src/theme/colors.css`**; typography in **`src/theme/typography.css`** (`type-*` utilities, geometric scale; **display-1/2/3** are fluid via `clamp` — display-1 hits **5rem** on desktop and scales down to **2.5rem** on mobile; above them **`type-display-hero`** (the one oversized moment, to 16vw) and **`type-display-xl`** (statement rows); every display step reads the brand-kit knobs `--font-display*`, CONSUMING.md → Brand kit); motion in **`src/theme/motion.css`**; page spine in **`src/theme/grid.css`** (`--grid-*`, `grid-page` / `band`, `--leading-base`). **`--spacing` stays 4px** — do not re-scale; baseline is 8px. See **ADR-0007**, **ADR-0008**, **ADR-0009**, **ADR-0010**, **DESIGN.md → Grid**. Use **`typographyClass()`** — not raw `text-sm` in document copy. **`type-eyebrow`** (`typographyClass("eyebrow")`) is the small uppercase mono caption for editorial labels — **SectionCaption**, **IndexList** captions, **DescriptionList** `variant="mono"` names; write the text in sentence case — the "/" marker comes from the component, `aria-hidden`. Not for app UI section labels (`overline`) or secondary text (`caption`). **`type-caption`** (`typographyClass("caption-tight")`, 12px on a 16px line) is a single line directly under a label — **LinkTile**'s meta line only, for now; never wrapped text, which stays on `caption` (`type-supporting`, 12px on 20px). **`type-lead`** (`typographyClass("lead")`, 18px → 21px, regular) is the one lead paragraph under a page H1, `text-fg`, 42rem measure — never on every section (section intros stay body size). **`type-reading`** (`typographyClass("reading")`, 17px at a 28px line) is long-form article text — **Prose** sets it; UI copy stays on `type-body`. A dotted hairline is **DescriptionList** `rule="dotted"`. See **ADR-0040**, **ADR-0041**.
 - **Page layout:** Every Storybook **Guides** page and consuming product page starts on **`grid-page`**; use **`band`** + responsive column spans for content alignment. Constrain a specific experience by overriding **`--grid-max`** on that wrapper (for example, `960px`) rather than replacing the grid with an arbitrary centered container.
 - **Scroll fade:** use **`scroll-fade-y`** / **`scroll-fade-x`** on the element that owns overflow to hint at clipped list or rail content. The mask is scroll-aware, disappears when no overflow exists in supporting browsers, and follows inline direction for RTL. Keep the surface fill/border on a wrapper; customize with `--scroll-fade-size` only when the default 12% / 40px cap does not fit. Copy **Foundations → Scroll fade → Pattern — …**.
 - **Motion:** Duration tiers in **`src/theme/motion.css`** — **fast** (hover/focus), **medium** (panels/layout), **slow** (rare). Single **`--ease-standard`**. CSS via `motionTransition()`; Motion via `motionTransitionProp()`. Choreography tokens `--motion-stagger`, `--motion-beat`, `--motion-blur-reveal` through `motionStaggerSeconds()`, `motionBeatSeconds(n)`, `motionBlurReveal(reduce)`, and `readMotionDurationSeconds(tier)` — Show code never hard-codes a blur, stagger, or duration. See **ADR-0008**. Storybook wraps `<MotionConfig reducedMotion="user">`.
 - **Icons:** **[Lucide](https://lucide.dev/icons/) only** until further notice — import from **`lucide-react`** in components, stories, and examples. Peer dependency, not bundled; use `stroke-current` / `ButtonIcon` for sizing. See **Foundations → Icons**.
-- **Button:** pill by default; **`layout="row"`** for flat full-width detail/settings lines (**`width="hug"`** sizes a row to its content with a tight gap — inline disclosure triggers); **`align="start"`** left-aligns a pill label and **`emphasis="quiet"`** puts `role="outline"` on the `border-border` hairline (full-width suggestion pills — **Pattern — suggestion pills**); **`layout="nav"`** for **NavList** rows (`selected`; `render` makes the row a link, the same as a pill). Seven **roles** (`primary`, `secondary`, `ghost`, `destructive`, **`inverse`** — surface fill and brand text, for a brand-blue field, **`outline`** — hairline border and transparent fill, **`inverse-outline`** — on-brand hairline and transparent fill, for that same navy field). Patterns: action, **`row`**, **`nav`**, `icon`, `count`, `status` morph, **`mono`** + **`endIcon`** (accent arrow square) — mutually exclusive where documented. **`status` with `icon`**: the icon morphs into the status glyph — **Pattern — copy button** (`icon={<Copy />}`, `statusLabels`, hold with **`buttonStatusHoldMs`**; the pill's live region announces the result). **`external`** with `render={<a href />}`: new tab, safe `rel`, spoken "(opens in a new tab)", **TextLink**'s trailing icon (`externalIcon={false}` drops it) — **Pattern — external link**; never hand-write `target` or the new-tab text. The shell sets its own case, so a caps-styled parent does not capitalize a label. No slots. [Motion reference](https://motion.dev/examples/react-multi-state-badge).
+- **Button:** pill by default; **`layout="row"`** for flat full-width detail/settings lines (**`width="hug"`** sizes a row to its content with a tight gap — inline disclosure triggers); **`align="start"`** left-aligns a pill label and **`emphasis="quiet"`** puts `role="outline"` on the `border-border` hairline (full-width suggestion pills — **Pattern — suggestion pills**); **`layout="nav"`** for **NavList** rows (`selected`; `render` makes the row a link, the same as a pill). Seven **roles** (`primary`, `secondary`, `ghost`, `destructive`, **`inverse`** — surface fill and brand text, for a brand-blue field, **`outline`** — hairline border and transparent fill, **`inverse-outline`** — on-brand hairline and transparent fill, for that same navy field). Patterns: action, **`row`**, **`nav`**, `icon`, `count`, `status` morph, **`mono`** + **`endIcon`** (accent arrow square) — mutually exclusive where documented. **`status` with `icon`**: the icon morphs into the status glyph — **Pattern — copy button** (`icon={<Copy />}`, `statusLabels`, hold with **`buttonStatusHoldMs`**; the pill's live region announces the result). **`external`** with `render={<a href />}`: new tab, safe `rel`, spoken "(opens in a new tab)", **TextLink**'s trailing icon (`externalIcon={false}` drops it) — **Pattern — external link**; never hand-write `target` or the new-tab text. The shell sets its own case, so a caps-styled parent does not capitalize a label. No slots. [Motion reference](https://motion.dev/examples/react-multi-state-badge). **`disabled`** is `aria-disabled` (stays in the tab order, ignores presses, 70% dim, no hover or press feedback); pass **`disabledReason`** to show why beside it. Prefer an enabled button plus an error on submit (Buttons rule U6).
 - **Avatar:** circular identity — required `name`, optional `src`, initials → **User** fallback; sizes `xsm` / `sm` / `md` (default) / `lg` / `xl` (20–128px). Optional `presence={{ tone, label, pulsing? }}` — rim dot via **Status** dot tokens (not the **Status** component). **`avatarSizeForCluster()`** for header rows; **`size="sm"`** in **Dropdown.Item** `start`. Not clickable — wrap at call site. Agents: copy **Components/Avatar → Pattern — …**; see **ADR-0017**.
 - **IconButton:** circular icon-only control. Patterns: toolbar (ghost), `fab`, `loading`, native `title`, **`inset`** (compact dismiss inside Chip), **`render={<a/>}`** (circular brand / icon links), **`pressed`** (toggle — `aria-pressed`, pressed fill and a filled glyph while on; votes, stars). Compose **Tooltip** for tokenized hover/focus labels and pass `title=""` to avoid duplicate native UI. **`aria-label` required** — use `Button` when text is needed.
 - **Kbd:** semantic keyboard keycap — one physical key per **Kbd**; compose multiple keycaps for shortcuts. Sizes `sm` | `md`; add `aria-label` when symbolic labels need spoken expansion. Display-only — never interactive on the keycap itself. Numbered choice rows pair trailing **Kbd** digits with **`useKbdChoiceKeys`** so `1`–`9` select the same way a click does while focus is not in text entry (a focused checkbox or radio still takes digits); pass `scope` (a ref) to act only while focus is inside that element, as in a chat gate (see **Pattern — numbered choice keys**). Copy **Components/Kbd → Pattern — keyboard shortcut**.
@@ -29,7 +29,7 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **ScrollHorizontal:** marketing gallery directly under the hero — `items`, optional `heading`, `intro` (**`ScrollHorizontal.Intro`**), `expandLast`, `expanded`; `className` on the root only. A sticky window translates the row from the first card to the last; `expandLast` then grows the last tile to full bleed. Reduced motion is a native horizontal scroller. Paste **Components/ScrollHorizontal → Pattern — project gallery**. See **ADR-0036**. Full contract: **docs/component-contracts.md → ScrollHorizontal**.
 - **Carousel:** a row of items to drag, scroll, or step through, with a progress scrubber under it — **Carousel.Item** children (any content; direct children, one per item) and a required `aria-label` or `aria-labelledby` (do not give a wrapping `section` the same name). The row is a native scroller: touch, trackpad, and shift-wheel move it; a mouse drags it, with a glide and a soft stop at each end; it does not loop. `itemWidth` is a percentage of the row — one number or `{ base, sm, md, lg }` (default `{ base: 80, sm: 55, lg: 40 }`; keep it under 100 so the next item shows); the gap is the grid gutter. `snap` (default on) rests on an item's leading edge. `bleed` runs the row to the page edges while items still start on the grid. `fade` (default on) fades clipped items the way `scroll-fade-x` does. `progress` is `center` (default) / `start` (a shorter track, full width on phones) / `full` / `none`: the filled part's place is the row's progress and its width the share of the row in view; drag it, or press the track; 44px hit area; it hides itself, keeping its space, while every item fits. Keyboard: the row is the tab stop — Left and Right move one item, Home and End go to the ends (arrows swap in RTL); Tab reaches links inside items and scrolls them into view. The scrubber is `aria-hidden` and not a tab stop. Each item is a group named by its place ("2 of 4"; `labels.item`). A drag never clicks a link inside an item. Reduced motion: no glide; moves are immediate. Server render: the row at its start, the scrubber at zero. No previous / next buttons. **`counter`** (default off) adds a visible "1 of 6" (`labels.counter`; polite live region; hidden while every item fits); **`onIndexChange(index, count)`** (0-based, the resting item) feeds a count shown elsewhere; **`activeIndex`** moves the row to an item. `className` is layout only. Not a gallery driven by page scroll (**ScrollHorizontal**). Paste **Components/Carousel → Pattern — image carousel**. See **ADR-0043**.
 - **RiveHand:** decorative hand on the marketing headline (`@rive-app/react-canvas`) — `hand` (`point` \| `rock`), `size`, `inline`, `active`, `idle`, `entrance`; `aria-hidden` by default. Apps serve two files beside each other: `/rive/interactive-icon-set.riv` and `/rive/rive.wasm` (`riveHandWasmSrc`, copied from `node_modules/@rive-app/canvas/rive.wasm`). Reduced motion draws one static frame. Paste **Components/HeroTileStack → Pattern — marketing hero**. See **ADR-0034**. Full contract: **docs/component-contracts.md → RiveHand**.
-- **SiteNav:** marketing site header — `start` | `middle` | `end` slots; **page chrome** (`placement="fixed"`, optional `scrollContainer`) vs **specimen** (`placement="inline"`); expanded is **in flow** (scrolls away); after scroll past `collapseAt` (default **50% of scrollport**) a **narrower hug pill pins 1rem from the top** (`compactLayout="grid"` optional); mega panel stays **grid-wide** above a light dim; mega body: **SiteNav.Featured** / **ReadRow** / **MenuMedia** / **MenuLinkGrid** (paste **Pattern — mega menu**); below `md` mega sections stack; **SiteNav.Links** / **Link** / **Menu** / **MenuSection** / **MenuLink** (Base UI NavigationMenu) with Tab-style **More** overflow when the middle track is tight; `mobile` → **Sheet** `side="end"`. Compose **Button** `render={<a/>}` for anchors. Brand: circular **IconButton** via `icon` + `aria-label` (or wordmark **Button**). Not app chrome. See **ADR-0028**.
+- **SiteNav:** marketing site header — `start` | `middle` | `end` slots; **page chrome** (`placement="fixed"`, optional `scrollContainer`) vs **specimen** (`placement="inline"`); expanded is **in flow** (scrolls away); after scroll past `collapseAt` (default **50% of scrollport**) a **narrower hug pill pins 1rem from the top** (`compactLayout="grid"` optional); mega panel stays **grid-wide** above a light dim; mega body: **SiteNav.Featured** / **ReadRow** / **MenuMedia** / **MenuLinkGrid** (paste **Pattern — mega menu**); below `md` mega sections stack; **SiteNav.Links** / **Link** / **Menu** / **MenuSection** / **MenuLink** (Base UI NavigationMenu) with Tab-style **More** overflow when the middle track is tight; `mobile` (below `md`) → a "☰ Menu" **Button** that becomes "✕ Close" in place, opening a full-height panel under the bar (Header rule N5–N8): 56px **SiteNav.MobileLink** rows (current page in weight + fill + `aria-current`), `mobileAction` pinned at the bottom; it's a dialog that keeps the bar live (focus to the first link, Tab cycles bar + panel, page inert and not scrolling, Escape / Close / any link tap closes, focus back to Menu). The bar's `end` actions give way (measured) when they don't fit beside Menu, so Menu keeps its word. Compose **Button** `render={<a/>}` for anchors. Brand: circular **IconButton** via `icon` + `aria-label` (or wordmark **Button**). Not app chrome. See **ADR-0028**.
 - **Breadcrumb:** the path to the current page — `items` (`{ label, href }` from the root; the last, without `href`, is the current page, `aria-current="page"`). Above `maxItems` (default 4, min 3) the first item and the last `maxItems - 2` stay and the middle folds into a "…" **IconButton** that opens a **Dropdown.Menu** of links — a disclosure (focus to the first link, arrows move, Tab leaves, Escape returns focus), not an ARIA menu; the same on phones. Long labels truncate (full label in the name and `title`). `separator` `chevron` (default) / `slash`; `variant` `sans` (body) / `mono` (eyebrow caps — editorial pages, beside **SectionCaption**). `renderLink={(item) => <Link href={item.href} />}` routes every crumb and menu link. `className` is layout only. Not main navigation (**SiteNav**) or tabs (**Tab**). Paste **Components/Breadcrumb → Pattern — path**, **Pattern — long path**, **Pattern — router links**, or **Pattern — editorial**. See **ADR-0042**.
 - **NavList:** sectioned secondary nav — **`sections`** + **`activeId`** / **`onSelect`**, or **NavList.Section** + **NavList.Item**. Inset pills via **Button** `layout="nav"` + **ButtonIcon**; optional counts (tabular); **`labelAlign="brand"`** reserves a 56px first-section band. Item **`href`** or **`render={<Link href />}`** makes the row an anchor (`render` wins if both are set) so a server-rendered app navigates without an `onSelect` island. **`trailing`** is a **Status** dot or a **Badge** `status` pill. Section **`action`** is an **IconButton** (filter or more). Paste **Components/NavList → Pattern — app sidebar** for the brand row, **Search**, sections, footer slot, and the phone form (**PageHeader** `variant="app"` menu **IconButton** + **Sheet** `side="start"`). Not primary navigation. See **ADR-0019**.
 - **AppShell:** signed-in page chrome — sidebar on `bg-body`, the page as an inset raised surface with a title bar. `sidebar` scrolls; **`sidebarFooter`** / **AppShell.SidebarFooter** is pinned under it in the column and the phone **Sheet** (a **DisplayControls** `controls="theme"` switch). The phone toggle's accessible name is **"Menu"** (`labels.menu`) — keep it. Render it from a `"use client"` module; it server-renders in full, the **Sheet** and **Panel** wait for open, and `displayThemeNoFlashScript` goes in `<head>` from a client module. Paste **Components/AppShell → Pattern — portal dashboard**. See **ADR-0047**. Full contract: **docs/component-contracts.md → AppShell**.
@@ -40,8 +40,8 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **TaskRows:** expandable task rows — composes **Accordion** for disclosure; adds status (**Badge**, **Status**), **meta**, detail rails, and **TaskRows.Detail**. Patterns: **status rows**; **capsules**; **action details** (`detailsLayout="actions"` + `TaskRows.Detail variant="button"` → **Button** `size="xs"`); **tag chips** (`detailsLayout="chips"` + read-only **Chip** `size="sm"`); **detail lines** (`TaskRows.Detail` + `onPress` → **Button** `layout="row"`). **`variant="table"`** is the needs-you table: `columns` (`id` `title` | `waiting` | `metric`, `header`, `align`, `width`), **`TaskRows.Row`** (`title`, `href` or `render`, `status` dot + label, `waiting` pill + detail, `metric` tabular value). `source` `loading` | `error` | `unwired` (footer `note`). No rows shows `empty` ("Nothing waiting"). Below `md` a row is two lines. Optional **Card.Body**.
 - **Accordion:** generic expand/collapse — **leading**, **label**, **trailing**, built-in chevron, `motion-collapse` panel. Variants: `list`, `capsule`, `plain`; **`flush`** (plain only) drops the inset so labels line up with surrounding text — filter side panels. A closed panel turns `visibility: hidden` once it folds, so Tab skips its controls. **TaskRows** is the task-status pattern on top.
 - **DescriptionList:** a list of facts — `dl` > **DescriptionList.Item** (`div` > `dt` `name` + `dd` value). `layout` `inline` (value beside the name, 2 : 3 tracks, default) or `stacked` (value under it — tags, actions), per list or per item. `rule` `solid` (default) / `dotted` (quieter — beside caption rules) / `none`. `variant` `sans` (caption name, body value) or `mono` (eyebrow name, mono caps value, tabular figures — post metadata). Values take text, `<time>`, **Badge** tags, or **Button** actions; several wrap in a row. Not form fields (**Field**), metrics (**Stat**), or status rows (**TaskRows**). Paste **Components/DescriptionList → Pattern — post metadata** or **Pattern — details**. See **ADR-0041**.
-- **SectionCaption:** the small uppercase mono caption over a page column ("/ Metadata", "/ Article", "/ Filters") — `type-eyebrow` on a `border-border-emphasized` rule; the "/" `marker` is `aria-hidden`. `as` `h2` (default — pair `id` with the region's `aria-labelledby`) or `p` (labels a column that has its own heading); `end` holds a **Button** `size="xs"` (Clear all) without growing the row; `rule` / `marker` can be turned off. Write `children` in sentence case. Copy **Components/SectionCaption → Pattern — column caption**. See **ADR-0041**.
-- **Band:** a full-bleed page section in a brand-kit tone. `tone` `default` / `inverse` (the brand surface, `--color-brand-surface`; also `data-theme="dark"`) / `field` (the saturated section colour, `--color-field`) sets `data-tone`, which remaps the surface, text, border and fill roles so every component inside re-skins; never re-colour what's inside with `className`. It holds its own `grid-page` on the shared `--grid-*` tokens: standing alone it's a full-width section; inside a `grid-page` it spans every column, paints to the viewport edges (border-image outset, no scrollbar) and its page becomes a subgrid, so its columns stay the page's. `spacing` `md` (48px, default) / `lg` (96px) / `none`; `as` `section` (default) / `div` / `header` / `footer` / `aside`. Status colours aren't remapped on `field`. Paste **Components/Band → Pattern — page in bands**; the brand kit and its contrast check are **Foundations/Brand kit → Theme a client**.
+- **SectionCaption:** the small uppercase mono caption over a page column ("/ Metadata", "/ Article", "/ Filters") — `type-eyebrow` on a `border-border-emphasized` rule; the "/" `marker` is `aria-hidden`. `as` `p` (default — an eyebrow in capitals is never a heading; pair `id` with the region's `aria-labelledby` to name it) or `h2`–`h4` (only when the region has no sentence-case heading and people jump to it); `end` holds a **Button** `size="xs"` (Clear all) without growing the row; `rule` / `marker` can be turned off. Write `children` in sentence case. Copy **Components/SectionCaption → Pattern — column caption**. See **ADR-0041**.
+- **Band:** a full-bleed page section in a brand-kit tone. `tone` `default` / `inverse` (the brand surface, `--color-brand-surface`; also `data-theme="dark"`) / `field` (the saturated section colour, `--color-field`) sets `data-tone`, which remaps the surface, text, border and fill roles so every component inside re-skins; never re-colour what's inside with `className`. It holds its own `grid-page` on the shared `--grid-*` tokens: standing alone it's a full-width section; inside a `grid-page` it spans every column, paints to the viewport edges (border-image outset, no scrollbar) and its page becomes a subgrid, so its columns stay the page's. `spacing` `md` (48px, default) / `lg` (64px on phones, 96px from `md`: the hero and the closing section) / `none` (Spacing rule S8: sections use these, never hand-set padding); `as` `section` (default) / `div` / `header` / `footer` / `aside`. Status colours aren't remapped on `field`. Paste **Components/Band → Pattern — page in bands**; the brand kit and its contrast check are **Foundations/Brand kit → Theme a client**.
 - **InlinePill:** a key word inside running text (a display headline, a lead line) in a soft pill that scales with the text (em-sized), with an optional decorative `media` picture on its left. Pop the pictures in with `useInlinePillsPopIn()` spread on the heading. Not a control: use `Chip` for filters and tokens, `Badge` for status. Keep 2–3 pills of one or two words per sentence.
 - **Prose:** long-form content set from plain HTML elements (rendered markdown) — headings, paragraphs, lists, quotes, inline code, code blocks, rules, images, figures, and tables, with the spacing between them. `size` `lg` (default — `type-reading`, headings a step up) or `md` (`type-body`, denser notes); `measure` `reading` (40rem, default) or `none`; `as` `div` / `article` / `section`. Wide tables scroll in their own box. Map markdown `#` to `h2` under a page `h1`, and links to **TextLink** (`external` for other sites). Never add classes to the elements inside. Paste **Components/Prose → Pattern — article body**; the full page is **Guides/Post page → Pattern — post page** (`metadataSide` `start` / `end` and `metadataColumns` 4 / 3 place the panel from `lg`; `metadataStack` `after` (default) / `before` places it below `lg`, where it stacks, and in the markup — `after` adds a date and reading-time line under the title below `lg`; pair `end` with `after` or `start` with `before` so tab order matches the layout at every width — never edit its classes). See **ADR-0041**.
 - **IndexList:** editorial index for list pages (blog, case studies) — **IndexList.Item** rows with `meta` (a `<time>`), a linked `title` (`href`, or `render={<Link href />}` for the app's router; a quiet **TextLink** in an `h2` by default — `titleAs`), and an optional `preview` an **IconButton** disclosure expands under the title. Optional `captions={{ meta, title }}` in sentence case (`type-eyebrow`, the "/" marker and the **SectionCaption** rule, `aria-hidden`) share the rows' tracks. Two tracks (7.5rem meta, title) once the list is 32rem wide (container query); one column below, captions hidden. `size` `lg` (type-display-3, default) / `md` / `sm`. `empty` replaces the rows when there are none. `className` is layout only. Not tabular data — **Table**. Paste **Components/IndexList → Pattern — post index**; with filters, **Guides/Filter panel → Pattern — filtered index** (a post's `facets` take one option or several per group; `defaultSelection` opens the page filtered, `selection` + `onSelectionChange` hold it in the URL). See **ADR-0040**.

package/docs/exports.json

@@ -1,6 +1,6 @@
 {
   "package": "@thewhatmatters/wmds",
-  "version": "0.4.29",
+  "version": "0.4.31",
   "import": "import { Button } from \"@thewhatmatters/wmds\";",
   "styles": [
     "@thewhatmatters/wmds/styles.css",
@@ -419,7 +419,8 @@
         "docs": "?path=/docs/components-herointro--docs"
       },
       "patterns": [
-        "components-herointro--two-line-intro"
+        "components-herointro--two-line-intro",
+        "components-herointro--with-actions"
       ]
     },
     {

package/docs/patterns/components-accordion--flush.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — flush
+// @thewhatmatters/wmds@0.4.31 · Pattern — flush
 // Storybook: Components/Accordion → Pattern — flush (?path=/story/components-accordion--flush)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-appshell--portal-dashboard-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — portal dashboard
+// @thewhatmatters/wmds@0.4.31 · Pattern — portal dashboard
 // Storybook: Components/AppShell → Pattern — portal dashboard (?path=/story/components-appshell--portal-dashboard-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-avatar--dropdown-row.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — dropdown row
+// @thewhatmatters/wmds@0.4.31 · Pattern — dropdown row
 // Storybook: Components/Avatar → Pattern — dropdown row (?path=/story/components-avatar--dropdown-row)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-badge--outline-tags.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — outline tags
+// @thewhatmatters/wmds@0.4.31 · Pattern — outline tags
 // Storybook: Components/Badge → Pattern — outline tags (?path=/story/components-badge--outline-tags)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-badge--status-pill.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — status pill
+// @thewhatmatters/wmds@0.4.31 · Pattern — status pill
 // Storybook: Components/Badge → Pattern — status pill (?path=/story/components-badge--status-pill)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-badge--with-avatar.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — with avatar
+// @thewhatmatters/wmds@0.4.31 · Pattern — with avatar
 // Storybook: Components/Badge → Pattern — with avatar (?path=/story/components-badge--with-avatar)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-band--page-in-bands.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — page in bands
+// @thewhatmatters/wmds@0.4.31 · Pattern — page in bands
 // Storybook: Components/Band → Pattern — page in bands (?path=/story/components-band--page-in-bands)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--editorial.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — editorial
+// @thewhatmatters/wmds@0.4.31 · Pattern — editorial
 // Storybook: Components/Breadcrumb → Pattern — editorial (?path=/story/components-breadcrumb--editorial)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--long-path.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — long path
+// @thewhatmatters/wmds@0.4.31 · Pattern — long path
 // Storybook: Components/Breadcrumb → Pattern — long path (?path=/story/components-breadcrumb--long-path)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--path.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — path
+// @thewhatmatters/wmds@0.4.31 · Pattern — path
 // Storybook: Components/Breadcrumb → Pattern — path (?path=/story/components-breadcrumb--path)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-breadcrumb--router-links.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — router links
+// @thewhatmatters/wmds@0.4.31 · Pattern — router links
 // Storybook: Components/Breadcrumb → Pattern — router links (?path=/story/components-breadcrumb--router-links)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--copy-button.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — copy button
+// @thewhatmatters/wmds@0.4.31 · Pattern — copy button
 // Storybook: Components/Button/Button → Pattern — copy button (?path=/story/components-button-button--copy-button)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--destructive-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — destructive action
+// @thewhatmatters/wmds@0.4.31 · Pattern — destructive action
 // Storybook: Components/Button/Button → Pattern — destructive action (?path=/story/components-button-button--destructive-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--external-link.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — external link
+// @thewhatmatters/wmds@0.4.31 · Pattern — external link
 // Storybook: Components/Button/Button → Pattern — external link (?path=/story/components-button-button--external-link)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--ghost-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — ghost action
+// @thewhatmatters/wmds@0.4.31 · Pattern — ghost action
 // Storybook: Components/Button/Button → Pattern — ghost action (?path=/story/components-button-button--ghost-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--inverse-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — inverse action
+// @thewhatmatters/wmds@0.4.31 · Pattern — inverse action
 // Storybook: Components/Button/Button → Pattern — inverse action (?path=/story/components-button-button--inverse-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--link-render.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — link
+// @thewhatmatters/wmds@0.4.31 · Pattern — link
 // Storybook: Components/Button/Button → Pattern — link (?path=/story/components-button-button--link-render)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--multi-state-badge.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — submit / async
+// @thewhatmatters/wmds@0.4.31 · Pattern — submit / async
 // Storybook: Components/Button/Button → Pattern — submit / async (?path=/story/components-button-button--multi-state-badge)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--outline-mono.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — outline mono
+// @thewhatmatters/wmds@0.4.31 · Pattern — outline mono
 // Storybook: Components/Button/Button → Pattern — outline mono (?path=/story/components-button-button--outline-mono)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--primary-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — primary action
+// @thewhatmatters/wmds@0.4.31 · Pattern — primary action
 // Storybook: Components/Button/Button → Pattern — primary action (?path=/story/components-button-button--primary-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--row-hug.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — row (hug)
+// @thewhatmatters/wmds@0.4.31 · Pattern — row (hug)
 // Storybook: Components/Button/Button → Pattern — row (hug) (?path=/story/components-button-button--row-hug)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--row-layout.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — row
+// @thewhatmatters/wmds@0.4.31 · Pattern — row
 // Storybook: Components/Button/Button → Pattern — row (?path=/story/components-button-button--row-layout)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--secondary-action.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — secondary action
+// @thewhatmatters/wmds@0.4.31 · Pattern — secondary action
 // Storybook: Components/Button/Button → Pattern — secondary action (?path=/story/components-button-button--secondary-action)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--suggestion-pills.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — suggestion pills
+// @thewhatmatters/wmds@0.4.31 · Pattern — suggestion pills
 // Storybook: Components/Button/Button → Pattern — suggestion pills (?path=/story/components-button-button--suggestion-pills)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--with-count.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — with count
+// @thewhatmatters/wmds@0.4.31 · Pattern — with count
 // Storybook: Components/Button/Button → Pattern — with count (?path=/story/components-button-button--with-count)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-button--with-icon.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — with icon
+// @thewhatmatters/wmds@0.4.31 · Pattern — with icon
 // Storybook: Components/Button/Button → Pattern — with icon (?path=/story/components-button-button--with-icon)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-button-floatingactionbutton--vertical-actions.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — vertical actions
+// @thewhatmatters/wmds@0.4.31 · Pattern — vertical actions
 // Storybook: Components/Button/FloatingActionButton → Pattern — vertical actions (?path=/story/components-button-floatingactionbutton--vertical-actions)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-calembed--pattern-skip-in-footer.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — skip in footer
+// @thewhatmatters/wmds@0.4.31 · Pattern — skip in footer
 // Storybook: Components/CalEmbed → Pattern — skip in footer (?path=/story/components-calembed--pattern-skip-in-footer)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--body-slot-occupancy-history.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Example — body slot (occupancy history)
+// @thewhatmatters/wmds@0.4.31 · Example — body slot (occupancy history)
 // Storybook: Components/Card/Card → Example — body slot (occupancy history) (?path=/story/components-card-card--body-slot-occupancy-history)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--headerless-media.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — headerless media
+// @thewhatmatters/wmds@0.4.31 · Pattern — headerless media
 // Storybook: Components/Card/Card → Pattern — headerless media (?path=/story/components-card-card--headerless-media)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--outlined-layout.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — outlined layout
+// @thewhatmatters/wmds@0.4.31 · Pattern — outlined layout
 // Storybook: Components/Card/Card → Pattern — outlined layout (?path=/story/components-card-card--outlined-layout)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--pinned-height.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — pinned height
+// @thewhatmatters/wmds@0.4.31 · Pattern — pinned height
 // Storybook: Components/Card/Card → Pattern — pinned height (?path=/story/components-card-card--pinned-height)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-card--terminal-frame.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — terminal frame
+// @thewhatmatters/wmds@0.4.31 · Pattern — terminal frame
 // Storybook: Components/Card/Card → Pattern — terminal frame (?path=/story/components-card-card--terminal-frame)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-card-selectablecard--selectable-cards-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — selectable cards
+// @thewhatmatters/wmds@0.4.31 · Pattern — selectable cards
 // Storybook: Components/Card/SelectableCard → Pattern — selectable cards (?path=/story/components-card-selectablecard--selectable-cards-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-carousel--image-carousel.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — image carousel
+// @thewhatmatters/wmds@0.4.31 · Pattern — image carousel
 // Storybook: Components/Carousel → Pattern — image carousel (?path=/story/components-carousel--image-carousel)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--audience-activity-heatmap.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — matrix heatmap
+// @thewhatmatters/wmds@0.4.31 · Pattern — matrix heatmap
 // Storybook: Components/Chart → Pattern — matrix heatmap (?path=/story/components-chart--audience-activity-heatmap)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--cartesian-no-data-gaps.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — Cartesian no-data gaps
+// @thewhatmatters/wmds@0.4.31 · Pattern — Cartesian no-data gaps
 // Storybook: Components/Chart → Pattern — Cartesian no-data gaps (?path=/story/components-chart--cartesian-no-data-gaps)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--occupancy-history-in-card.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — occupancy history in Card
+// @thewhatmatters/wmds@0.4.31 · Pattern — occupancy history in Card
 // Storybook: Components/Chart → Pattern — occupancy history in Card (?path=/story/components-chart--occupancy-history-in-card)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--occupancy-in-card.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — occupancy KPI in Card
+// @thewhatmatters/wmds@0.4.31 · Pattern — occupancy KPI in Card
 // Storybook: Components/Chart → Pattern — occupancy KPI in Card (?path=/story/components-chart--occupancy-in-card)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--post-reach-distribution.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — distribution strip
+// @thewhatmatters/wmds@0.4.31 · Pattern — distribution strip
 // Storybook: Components/Chart → Pattern — distribution strip (?path=/story/components-chart--post-reach-distribution)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--ranked-audience-breakdown.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — ranked audience breakdown
+// @thewhatmatters/wmds@0.4.31 · Pattern — ranked audience breakdown
 // Storybook: Components/Chart → Pattern — ranked audience breakdown (?path=/story/components-chart--ranked-audience-breakdown)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--revenue-by-line.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — revenue by line
+// @thewhatmatters/wmds@0.4.31 · Pattern — revenue by line
 // Storybook: Components/Chart → Pattern — revenue by line (?path=/story/components-chart--revenue-by-line)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--segmented-ring-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — segmented ring
+// @thewhatmatters/wmds@0.4.31 · Pattern — segmented ring
 // Storybook: Components/Chart → Pattern — segmented ring (?path=/story/components-chart--segmented-ring-pattern)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chart--unit-grid-composition.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.29 · Pattern — 100-unit composition
+// @thewhatmatters/wmds@0.4.31 · Pattern — 100-unit composition
 // Storybook: Components/Chart → Pattern — 100-unit composition (?path=/story/components-chart--unit-grid-composition)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.