@thewhatmatters/wmds 0.4.0 → 0.4.1

package/dist/theme.css

@@ -90,6 +90,7 @@
   --color-on-brand-hover: var(--color-on-brand-hover);
   --color-brand-outline: var(--color-brand-outline);
   --color-brand-soft: var(--color-brand-soft);
+  --color-brand-tint: var(--color-brand-tint);
   --color-primary: var(--color-primary);
   --color-primary-foreground: var(--color-on-primary);
   --color-primary-hover: var(--color-primary-hover);

package/dist/typography.css

@@ -110,6 +110,24 @@
   --text-code-weight: var(--font-weight-normal);
   --text-code-leading: 1.4286;
 
+  /**
+   * WMDS extension — long-form reading text (**Prose** `size="lg"`): 17px at a 28px line. Article
+   * bodies at the 40rem reading measure; UI copy stays on `type-body`.
+   */
+  --text-reading-size: var(--font-size-lg);
+  --text-reading-weight: var(--font-weight-normal);
+  --text-reading-leading: 1.6471;
+
+  /**
+   * WMDS extension — small uppercase mono caption for editorial labels: column captions over index
+   * rows and filter panel titles ("/ Date", "/ Filters"). Write the text in sentence case; the
+   * utility sets the capitals.
+   */
+  --text-eyebrow-size: var(--font-size-sm);
+  --text-eyebrow-weight: var(--font-weight-normal);
+  --text-eyebrow-leading: 1.3333;
+  --text-eyebrow-tracking: 0.05em;
+
   /** WMDS extension — fixed-height control shells (Button, Chip, Input). Phase 4 migrates atoms here. */
   --text-control-size: var(--font-size-base);
   --text-control-weight: var(--font-weight-medium);
@@ -216,6 +234,22 @@
   line-height: var(--text-code-leading);
 }
 
+@utility type-reading {
+  font-family: var(--font-family-body);
+  font-size: var(--text-reading-size);
+  font-weight: var(--text-reading-weight);
+  line-height: var(--text-reading-leading);
+}
+
+@utility type-eyebrow {
+  font-family: var(--font-family-code);
+  font-size: var(--text-eyebrow-size);
+  font-weight: var(--text-eyebrow-weight);
+  line-height: var(--text-eyebrow-leading);
+  letter-spacing: var(--text-eyebrow-tracking);
+  text-transform: uppercase;
+}
+
 @utility type-control {
   font-family: var(--font-family-body);
   font-size: var(--text-control-size);

package/docs/README.md

@@ -6,7 +6,7 @@ These files ship in the npm package at `node_modules/@thewhatmatters/wmds/docs/`
 |------|------------|
 | `exports.json` | Every export with its tier, category, one-line summary, Storybook page, and the ids of its patterns. Also the CSS entries, peer dependencies, planned components, and lib helpers. |
 | `components.md` | The component and token contracts: props, patterns, composition rules, and what not to do. |
-| `component-contracts.md` | Long-form contracts for FooterReveal, HeroTileStack, TextSequence, ScrollHorizontal, RiveHand, and PromptBar. |
+| `component-contracts.md` | Long-form contracts for FooterReveal, HeroTileStack, TextSequence, ScrollHorizontal, RiveHand, PromptBar, and ChatDock. |
 | `patterns/index.json` | One row per pattern: id, Storybook title, pattern name, file. |
 | `patterns/<id>.tsx` | A pattern's Show code, exactly as Storybook shows it, with a header naming the pattern and the package version. |
 | `consumer-agents.md` | A block to paste into a consuming repo's `AGENTS.md` / `CLAUDE.md`. |

package/docs/component-contracts.md

@@ -25,3 +25,18 @@ decorative hand on the marketing hero headline, from `public/rive/interactive-ic
 ## PromptBar
 
 wide prompt pill — inline **TextArea** (`rows={1}`, one line when empty, grows through **3 lines**, then scrolls) and an **IconButton** `sm` send control (Lucide **ArrowRight**) inset with even padding. The pill owns focus; the send control does not draw a second ring. Placeholder **Ask anything…**. Enter sends; Shift+Enter inserts a newline. Send stays disabled and muted until the draft has text, then uses **`--color-brand`** (`#011272` / `bg-brand`). No new Button role. Voice and attachments are not part of this version. Copy **Components/PromptBar → Pattern — prompt bar**. Optional `start` holds the brand mark (**Avatar** `size="md"`, the send circle's size) and `end` holds extra inset **IconButton** `sm` controls before send. On the marketing pages **PromptBar** appears inside **ChatDock** (**Components/ChatDock → Pattern — chat dock**): pinned to the bottom of the page grid (`--grid-max: 40rem`, above the safe area, under **SiteNav**), it opens into a non-modal chat window instead of handing off to a separate ask page. Do not hand-roll the pin, and do not restyle **SiteNav**.
+
+## ChatDock
+
+The site assistant. At rest, a **PromptBar** pinned to the bottom of the page grid (`--grid-max: 40rem`, above the safe area, under **SiteNav**), with the brand `mark` (**Avatar** `size="md"`) in its `start` slot. Hovering the bar shows the `suggestions` that carry a `prompt` as **Button** `secondary` pills above it, one `--motion-stagger` apart; touch never shows them. Focusing, clicking, or typing opens a non-modal window around the same composer, and Escape or **Close chat** folds it back. One **PromptBar** serves both states, so the composer is on screen every frame and never jumps. From `md` the window is an opaque card on the composer's bottom edge that grows up and out of it on the medium tier — height, 16px wider on each side, pill radius to the shell radius; the mark folds out of the composer (the header carries it), and the composer keeps its width, rising only by the `disclaimer` line that opens under it. The header, conversation, and rows fade in one `--motion-stagger` apart, a `--motion-beat` after the window starts; on close they fade first, the window folds back into the bar, and the hover pills return once it has folded. Below `md` the window fills the screen and rises from the bottom edge, and falls back on close. Escape while opening, or a click in the composer while closing, reverses from where it is. Reduced motion crossfades the window in place at full size; nothing slides, so the mark and the disclaimer line switch at once and the composer steps up by that line. The window is the shared overlay header (mark, `title`, `subtitle`, close only — no send or expand arrow), the conversation (`role="log"`: `greeting`, then `messages`; the visitor's turns sit on `bg-brand-tint`, replies are plain text; a **Status** dot thinking row while `thinking`), and the suggestion rows (**Button** `layout="row"`) until the first message — a row that sends moves focus to the composer, since the rows leave as the message lands, so Escape still closes the window; the composer and the `disclaimer` caption sit on top of it. The thread stays pinned to the end while the reader is there.
+
+**Follow-ups.** `followUps` takes the same items as `suggestions` (`{ id, label, prompt? }`; an `icon` is not shown) for the latest reply only. They show while the last message is an assistant reply and `thinking` is off, and disappear the moment the visitor sends — ChatDock hides them itself before the app clears them, so they never sit beside a pending reply. Choosing one calls `onSuggestionSelect`, then `onSend` with its `prompt` when it has one; an item without a `prompt` (for example **Start a project**) only calls `onSuggestionSelect`. The press does not take focus from the composer, and a keyboard choice hands focus back to it. They rise in one `--motion-stagger` apart (fast tier) and leave at once. `followUpsPlacement="inline"` (default) renders them as **Button** `layout="row"` rows in the conversation, directly under the reply, each led by Lucide **CornerDownRight**, in a group named `labels.followUps` (**Suggested follow-ups**) — 44px targets below `md`, 36px from `md`. `followUpsPlacement="composer"` renders text-only **Button** `secondary` pills between the conversation and the composer; they wrap, so at 390 three take about 150px from the conversation. The app decides which replies get follow-ups; **Pattern — chat dock** holds the state (set from `ask`'s result, cleared on send).
+
+**Reply row.** Under each finished reply, a row of up to three parts, each shown on its own: **Copy** when the message has `copyText` (it writes that text to the clipboard, swaps its icon to a check and its name to `labels.copied` for two seconds, and announces it in a status region); thumbs up and down when `onMessageFeedback` is passed and the message carries `feedback` (**IconButton** `pressed` toggles named `labels.helpful` / `labels.notHelpful`, one vote at a time; `feedback` is `"up" | "down" | null` — `null` until the visitor votes — and pressing the active thumb calls `onMessageFeedback(message, null)`; leave `feedback` out on replies that take no vote, such as a form's summary); and the score when the message has `meta` (`label` as muted caption text, not a control; `description` follows it for screen readers). Visitor turns and the greeting never have a row. Where the pointer can hover, the row shows while the reply is hovered or holds focus (fast tier); on touch screens it is always shown. Either way it keeps its height, so the thread never moves. While `thinking` is on, the latest reply is still arriving: its row keeps its place but shows nothing. Buttons are **IconButton** `md` (44px) below `md` and `sm` (36px) from `md`, pulled out so the first glyph lines up with the reply text. **Pattern — chat dock** holds the votes: `ask` resolves with `string | { reply, followUps?, meta?, copyText?, startProject? }` (`copyText` defaults to the reply; replies start with `feedback: null`), and each vote goes to its required `onFeedback` prop. It also holds Start a project: `startProject` / `onStartProjectChange` (a site button sets it; the Start a project suggestion and an `ask` result with `startProject` open it) and `renderStartProject`, which returns the gate.
+
+**Gate.** `gate` puts a multi-step form in the composer's place — **ChatDock.Gate** (`ChatDockGate`), for Start a project. While it is set and the window is open, the composer, the suggestion rows, the follow-ups, and the disclaimer step aside; the conversation stays above it. Setting it opens the window (closed, or mid-conversation) and moves focus to the gate; clearing it brings the composer back and returns focus to it. The composer and the gate share one cell and crossfade (fast tier) while the area eases between their heights (medium tier); both stay mounted, so a gate keeps its progress when the visitor closes the window with it up, and it is there when the window reopens. The gate hugs each step up to a cap — the window less its header, 7rem of conversation, and the space under the gate, never below 12rem — so the last lines of the latest reply stay in view; past the cap its body scrolls. Escape belongs to the gate: **ChatDock.Gate** calls `onClose` on it, and ChatDock does not fold the window on Escape while a gate is up (a second Escape, at the composer, does). **ChatDock.Gate** is a **Card** (`as="section"`, `padding="none"`, `variant="surface"`): `title` (names the gate) and `subtitle`; at the end of the header **IconButton** previous (disabled on step 1), the progress (`labels.progress`, "2 of 4", announced politely), next (disabled without `onNext` or while `canContinue` is false), and close; the step in **Card.Body** on the inset well, sliding between steps (fast tier) while the body eases to the new height (medium tier); **Card.Footer** with `footerStart` (for example **CalEmbed.Skip**), Cancel, and the primary action (`continueLabel`, shown when `onNext` is passed). Controls are 44px below `md` and 36px from `md`. Number keys belong to the pattern through **useKbdChoiceKeys** with `scope` set to the gate, so digits act only while focus is in it. **Pattern — start a project gate** fills four steps — services as numbered **Checkbox** rows, budget as numbered **Radio** rows, **IntakeForm**, **CalEmbed** — and on booking or skipping calls `onSubmit`, fires confetti from the control used, and hands the conversation the answers (**ChatQa**) and a confirmation line.
+
+**Phones.** Below `md` the window fills the part of the screen a keyboard leaves visible (`visualViewport`), and the composer and a gate sit at its bottom edge.
+
+The app owns `messages`, `thinking`, `followUps`, the votes, the gate's open state, `onSend`, and `onSuggestionSelect`; ChatDock never fetches or parses Markdown (`content` is text or rendered Markdown). `placement="inline"` is for previews only. Copy **Components/ChatDock → Pattern — chat dock**. See **ADR-0039**.
+

package/docs/components.md

@@ -1,24 +1,24 @@
 # @thewhatmatters/wmds — component contracts
 
-Version 0.4.0. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
+Version 0.4.1. 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); 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.
+- **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); 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-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`). Six **roles** (`primary`, `secondary`, `ghost`, `destructive`, **`inverse`** — surface fill and brand text, for a brand-blue field, **`outline`** — hairline border and transparent fill). Patterns: action, **`row`**, **`nav`**, `icon`, `count`, `status` morph, **`mono`** + **`endIcon`** (accent arrow square) — mutually exclusive where documented. 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`). Six **roles** (`primary`, `secondary`, `ghost`, `destructive`, **`inverse`** — surface fill and brand text, for a brand-blue field, **`outline`** — hairline border and transparent fill). 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).
 - **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). 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`–`4` select the same way a click does while focus is not in a text field (see **Pattern — numbered choice keys**). Copy **Components/Kbd → Pattern — keyboard shortcut**.
-- **TextLink:** inline anchor for navigation inside prose — canonical solid underline, stronger hover decoration, and focus ring. `external` opens a new tab and appends Lucide **SquareArrowOutUpRight** with spoken context. Inherits surrounding type size; `className` is layout only. Use **Button** for actions. Copy **Components/TextLink → Pattern — inline prose link**.
+- **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**.
+- **TextLink:** inline anchor for navigation — `variant="prose"` (default) inside prose: canonical solid underline, stronger hover decoration, and focus ring. **`variant="quiet"`** for headline-size text and list titles: no underline at rest, an underline scaled to the text on hover and focus, the same focus ring; inherits size and weight from the heading around it — never inside running prose. `external` opens a new tab and appends Lucide **SquareArrowOutUpRight** with spoken context. Inherits surrounding type size; `className` is layout only. Use **Button** for actions. Copy **Components/TextLink → Pattern — inline prose link** or **Pattern — quiet title link**.
 - **Tooltip:** short supplemental label — **`Tooltip.Provider`** shares hover delay; **`Tooltip.Trigger render={...}`** composes a ref/DOM-prop-forwarding control; **`Tooltip.Content`** portals with collision-aware physical or logical placement. Opens on hover/focus, closes with Escape, and does not open on touch. No essential or interactive content. Disabled native controls need the documented focusable wrapper. Copy **Components/Tooltip → Pattern — …**.
-- **Badge:** solid and **muted** semantic fills. Patterns: label, **`emphasis="muted"`**, `count`, `icon`, **`avatar`**, **`iconOnly`** — mutually exclusive where documented. **`avatar={{ src, alt }}`** renders **Avatar** at the badge size (`badgeAvatarSize`: sm → 20px, md → 24px). **`BadgeSegmentCount`** for filter/tab segment totals (Chip trailing count). No **Status** dot inside Badge. See **ADR-0033**.
+- **Badge:** solid, **muted**, and **outline** (hairline, transparent fill) semantic fills. Patterns: label, **`emphasis="muted"`**, **`emphasis="outline"`** + **`mono`** (mono caps, as **Button** `mono` — author and category tags), **`render={<a href />}`** (a tag that navigates: hover underline, focus ring, 44px-tall hit area — **Pattern — outline tags**), `count`, `icon`, **`avatar`**, **`iconOnly`** — mutually exclusive where documented. Actions stay on **Button**. **`avatar={{ src, alt }}`** renders **Avatar** at the badge size (`badgeAvatarSize`: sm → 20px, md → 24px). **`BadgeSegmentCount`** for filter/tab segment totals (Chip trailing count). No **Status** dot inside Badge. See **ADR-0033**.
 - **Chip:** filter/toggle molecule — composes **`BadgeIcon`** / **`ButtonIcon`**, **`IconButton inset`** (remove), **`BadgeSegmentCount`** (count). Patterns: **multi-select filter** (`ChipFilterGroup` + `value`), single-select group, standalone `selected`, **removable** (`onRemove`), **read-only**. Sizes `sm` | `md` | `lg`. Optional `icon`, `count` — not with `onRemove`. No slots.
 - **SegmentedControl:** connected **segmented control** — one track, Motion sliding thumb, mutually exclusive **`SegmentedControl.Item`** segments (`role="radiogroup"`). Patterns: **shape/settings toggle** (`layout="hug"`), **view switcher** (`layout="stretch"`). Sizes **`sm` | `md` | `lg`** — cluster tiers (28 / 36 / 44px), **1:1 with Chip**; pair **Button** via `buttonSizeForCluster()` and **IconButton** via `iconButtonSizeForCluster()`. Not multi-select — use **ChipFilterGroup**; not many options — use **Select**. **Badge** `sm`/`md` is inline label scale, not cluster header pairing.
 - **DisplayControls:** compact page-utility molecule — controlled grid visibility + theme mode (`auto` | `light` | `dark`); composes **Button** + **Kbd**. Global **G** toggles grid and **T** cycles theme. When paired with **GridOverlay**, set `keyboardShortcut={false}` on the overlay. `className` is placement only. Copy **Components/DisplayControls → Pattern — page display controls**.
@@ -34,18 +34,22 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **Tab:** responsive peer-page/view navigation — **Tab.Group** + **Tab** (`tablist` / `tab`); inactive labels are regular-weight `text-muted`, active labels are medium-weight `text-fg` with the shared Motion bottom rule, and the muted pill fill is hover-only; optional `count`. Width overflow reserves a **More** Dropdown; selecting a hidden tab promotes it into the final visible slot before More. Not **SegmentedControl** (settings choice) or **Chip** (filter). See **ADR-0022**.
 - **Stat:** at-a-glance metric tile — required `label`, `value`; optional `trend` (muted **Badge**), `start` / `end`, `loading`. **`Stat.Group`** — responsive grid (`columns` 2–4, 2-up mobile). **`size="sm"`** for insights rows; **`size="md"`** for hero KPI above charts. Inline mono trend (`chartKpiTrend*`) stays on **Chart**-paired KPIs — not **Badge**. Section heading + actions → **PageHeader** `variant="page"`.
 - **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"`). Optional **Card.Body**.
-- **Accordion:** generic expand/collapse — **leading**, **label**, **trailing**, built-in chevron, `motion-collapse` panel. Variants: `list`, `capsule`, `plain`. **TaskRows** is the task-status pattern on top.
+- **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**.
+- **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**. See **ADR-0041**.
+- **IndexList:** editorial index for list pages (blog, case studies) — **IndexList.Item** rows with `meta` (a `<time>`), a linked `title` (`href`; 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** is planned. Paste **Components/IndexList → Pattern — post index**; with filters, **Guides/Filter panel → Pattern — filtered index**. See **ADR-0040**.
 - **Card:** `Card.Header`, `Card.Body`, `Card.Footer`. Layout cards (`padding="none"`): header/footer on the shell; **`Card.Header`** is two horizontal slots (`start` | `end`) at **16px** (`px-4`). **`end` is always trailing** (`ml-auto`) — overflow / **MoreMenu** stays on the right even when `start` is omitted. **`Card.Body` is a square composition slot** with a **2px** horizontal gutter — no inner pad, no radius, **no default fill**. The **occupant** dictates how the body region looks; use **`cardLayoutBodyOccupantInsetXClasses`** (`px-3.5` / 14px) + **`cardLayoutBodyOccupantPadYClasses`** (`py-[16px]` / literal 16px vertical) when body content should align with header/footer (2px + 14px = 16px horizontal). Shape config lives in **`src/theme/shape.css`**: shell **`--radius-card-shell: 16px`**, body occupant **`--radius-card-body: 14px`**. Radius-only media → **`cardLayoutBodyOccupantRadiusClasses`**; inset gray/chart wells → **`cardLayoutBodyOccupantWellClasses`** or **`cardLayoutBodyOccupantDotGridWellClasses`**. A headerless layout **Card.Body** densifies the shell top to 2px (`pt-[2px]`) — same density as footerless / `bodyTerminal` bottom; **`headerless`** is only an override for wrapped slot composition. A direct terminal **`Card.Body`** automatically fills stretched cards and gets the 2px bottom shell inset; **`bodyTerminal`** is only an override for wrapped slot composition. Pin a layout height on the root (`className`) with Header + Body + Footer — Header/Footer stay put; **Card.Body** scrolls (2px gutter unchanged; no new variant). See **Components/Card/Card → Pattern — pinned height**. `variant="surface"` is elevated; **`variant="outlined"`** uses **`shadow-soft-card`** with no stroke (same elevation as layout `surface`). Radius stays **`--radius-card-shell`**. Default **`shape="rounded"`**. **`shape="flush"`** only when a parent owns outer chrome. Simple cards: `padding="md"`.
 - **Input:** pill-only. Optional leading `icon`; trailing `endBadge` or status / `loading`. Hero search with inset button → **Search** molecule. See **ADR-0006**.
 - **PromptBar:** wide prompt pill — inline **TextArea** (one line when empty, grows through 3 lines, then scrolls) and an inset **IconButton** `sm` send control. Enter sends; Shift+Enter inserts a newline; send stays disabled until the draft has text. Optional `start` (brand mark — **Avatar** `size="md"`) and `end` (extra inset **IconButton** `sm`) slots. No new Button role. Copy **Components/PromptBar → Pattern — prompt bar**. The site assistant on the marketing pages is **ChatDock**, not a hand-pinned PromptBar. Do not restyle **SiteNav**. Full contract: **docs/component-contracts.md → PromptBar**.
-- **ChatDock:** the site assistant — a **PromptBar** pinned to the bottom of the page grid (`--grid-max: 40rem`, under **SiteNav**) with the brand `mark`; hovering shows `suggestions` that carry a `prompt` as **Button** `secondary` pills above it; focusing, clicking, or typing opens a non-modal chat window that grows up out of the bar (shared overlay header with `title` / `subtitle` / close, `greeting`, `messages`, `thinking` row, suggestion rows — **Button** `layout="row"` — until the first message, composer, `disclaimer`). Escape or close folds it back. Full screen below `md`. The app owns `messages` and `onSend`; suggestions without a `prompt` (for example **Start a project**) only call `onSuggestionSelect`. No full-page chat, no header send/expand arrow, no voice. `placement="inline"` is for previews only. Copy **Components/ChatDock → Pattern — chat dock**. See **ADR-0039**.
+- **ChatDock:** the site assistant — a **PromptBar** pinned to the bottom of the page grid (`--grid-max: 40rem`, under **SiteNav**) with the brand `mark`; hovering shows `suggestions` that carry a `prompt` as **Button** `secondary` pills above it; focusing, clicking, or typing opens a non-modal chat window around the same composer (shared overlay header with `title` / `subtitle` / close, `greeting`, `messages` (visitor turns on `bg-brand-tint`, replies as plain text), `thinking` row, suggestion rows — **Button** `layout="row"` — until the first message (a row that sends hands focus to the composer as the rows leave), `disclaimer` under the composer). One **PromptBar** serves both states: the window grows up out of the bar and Escape or close folds it back; either reverses the other midway. Below `md` it fills the screen, rising from the bottom edge. Reduced motion crossfades. `followUps` (same items as `suggestions`; `icon` not shown — inline rows lead with **CornerDownRight**, composer pills are text only) show under the latest reply only — hidden while `thinking`, gone the moment the visitor sends; `followUpsPlacement` is `inline` (default, rows in the thread, 44px on phones) or `composer` (pills above the composer). Under each finished reply, a row: **Copy** (`copyText`), thumbs (`onMessageFeedback`, on replies that carry `feedback` — `null` until the visitor votes; **IconButton** `pressed`), and a muted score (`meta: { label, description? }`, e.g. "Match 99%") — each part on its own; shown on hover or focus where the pointer can hover, always on touch; it keeps its place so the thread never moves, and stays empty while the latest reply is still arriving. Never put actions inside `content`. `gate` puts a multi-step form — **ChatDock.Gate** (header with previous · "2 of 4" · next · close, scrolling step body, footer with Cancel · Next) — in the composer's place, conversation above: setting it opens the window and takes focus; composer, suggestion rows, follow-ups, and disclaimer step aside; capped so the latest reply stays in view; Escape is the gate's; the window's close keeps it and its progress. Phones keep the window inside the area a keyboard leaves visible. Start a project runs as a gate, not a dialog — paste **Pattern — start a project gate** and return it from **Pattern — chat dock**'s `renderStartProject`. Never put a form inside `content`. The app owns `messages`, `followUps`, votes, the gate's open state, and `onSend`; suggestions without a `prompt` (for example **Start a project**) only call `onSuggestionSelect`. No full-page chat, no header send/expand arrow, no voice. `placement="inline"` is for previews only. Copy **Components/ChatDock → Pattern — chat dock** (it holds the follow-up state, the votes, and Start a project). See **ADR-0039**. Full contract: **docs/component-contracts.md → ChatDock**.
 - **TextArea:** element-radius multiline — same optional `label`, `description`, `status`, `message`, and `loading` as **Input**; default `resize="vertical"`. See **ADR-0006**.
 - **Field:** label/layout wrapper — `orientation="vertical" | "horizontal"`; never required. Validation stays on **Input** / **TextArea**. See **ADR-0006**.
-- **Checkbox:** boolean toggle — label row + optional `description`, `indeterminate`, `status` / `message`, and `loading`. See **ADR-0006**.
+- **Checkbox:** boolean toggle — label row + optional `description`, `indeterminate`, `status` / `message`, and `loading`. **`count`** puts a muted number at the row's end (filter results, styled like **NavList** counts); screen readers hear it after the label in parentheses — "Guides (2)", or "Guides (2 posts)" with `countLabel`. Never write the count into `label`. See **ADR-0006**.
 - **Radio:** single option circle — same label row rhythm as **Checkbox**; compose in **RadioGroup**. See **ADR-0006**.
 - **RadioGroup:** mutually exclusive options — `value` / `onValueChange`, vertical or horizontal layout, group validation band.
 - **Switch:** instant on/off — pill track + sliding thumb; `layout="settings"` for label-left rows. See **ADR-0006**.
-- **CheckboxGroup:** multi-select options — `values` / `onValuesChange`, vertical or horizontal layout, group validation band.
+- **CheckboxGroup:** multi-select options — `values` / `onValuesChange`, vertical or horizontal layout, group validation band. **CheckboxGroup.Item** takes `count` / `countLabel` like **Checkbox**. A filter side panel — **Accordion** `flush` groups, counts, Clear all, a **Sheet** on phones — is **Guides/Filter panel → Pattern — filtered index**.
 - **Select:** pill trigger matched to **Input** shell + floating listbox (**Dropdown.Menu** / **Dropdown.Item**). **`size="sm"`** in Card headers beside **Chip sm**. Options support **`start`** / **`end`** slots for icons and shortcuts. See **Components/Select**, **Components/Dropdown**.
 - **Dropdown:** shared menu panel (`p-0.5` inset) + three-slot rows (`start` | label | `end`) — composed by **Select**; action menus via **MoreMenu**.
 - **MoreMenu:** kebab **IconButton** + floating **Dropdown** action menu — **Card.Header** `end` (right) only; never left-align overflow. Menu right-aligns to trigger; expanded trigger retains the ghost hover surface; **`items`** + **`onAction`**. Sizes **`xs` | `sm` | `md` | `lg`** (**IconButton** scale). Not for single-select — **Select** / **SegmentedControl**.

package/docs/exports.json

@@ -1,6 +1,6 @@
 {
   "package": "@thewhatmatters/wmds",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "import": "import { Button } from \"@thewhatmatters/wmds\";",
   "styles": [
     "@thewhatmatters/wmds/styles.css",
@@ -36,7 +36,9 @@
         "title": "Components/Accordion",
         "docs": "?path=/docs/components-accordion--docs"
       },
-      "patterns": []
+      "patterns": [
+        "components-accordion--flush"
+      ]
     },
     {
       "name": "Avatar",
@@ -61,6 +63,7 @@
         "docs": "?path=/docs/components-badge--docs"
       },
       "patterns": [
+        "components-badge--outline-tags",
         "components-badge--with-avatar"
       ]
     },
@@ -74,7 +77,9 @@
         "docs": "?path=/docs/components-button-button--docs"
       },
       "patterns": [
+        "components-button-button--copy-button",
         "components-button-button--destructive-action",
+        "components-button-button--external-link",
         "components-button-button--ghost-action",
         "components-button-button--inverse-action",
         "components-button-button--link-render",
@@ -147,7 +152,8 @@
         "docs": "?path=/docs/components-chatdock--docs"
       },
       "patterns": [
-        "components-chatdock--pattern-chat-dock"
+        "components-chatdock--pattern-chat-dock",
+        "components-chatdock--pattern-start-project-gate"
       ]
     },
     {
@@ -174,6 +180,7 @@
       },
       "patterns": [
         "components-checkbox-checkbox--default",
+        "components-checkbox-checkbox--with-count",
         "components-checkbox-checkbox--with-description"
       ]
     },
@@ -187,7 +194,8 @@
         "docs": "?path=/docs/components-checkbox-checkboxgroup--docs"
       },
       "patterns": [
-        "components-checkbox-checkboxgroup--default"
+        "components-checkbox-checkboxgroup--default",
+        "components-checkbox-checkboxgroup--option-counts"
       ]
     },
     {
@@ -212,6 +220,20 @@
       },
       "patterns": []
     },
+    {
+      "name": "DescriptionList",
+      "tier": "molecule",
+      "category": "Table & list",
+      "summary": "Name-and-value rows (dl, dt, dd) with a solid or dotted rule; values take text, tags, or actions.",
+      "storybook": {
+        "title": "Components/DescriptionList",
+        "docs": "?path=/docs/components-descriptionlist--docs"
+      },
+      "patterns": [
+        "components-descriptionlist--details",
+        "components-descriptionlist--post-metadata"
+      ]
+    },
     {
       "name": "Dialog",
       "tier": "organism",
@@ -336,6 +358,19 @@
       },
       "patterns": []
     },
+    {
+      "name": "IndexList",
+      "tier": "molecule",
+      "category": "Table & list",
+      "summary": "Editorial index rows: a meta column, a large linked title, and an optional preview, under shared column captions.",
+      "storybook": {
+        "title": "Components/IndexList",
+        "docs": "?path=/docs/components-indexlist--docs"
+      },
+      "patterns": [
+        "components-indexlist--post-index"
+      ]
+    },
     {
       "name": "Input",
       "tier": "atom",
@@ -483,6 +518,19 @@
         "components-promptbar--pattern-prompt-bar"
       ]
     },
+    {
+      "name": "Prose",
+      "tier": "atom",
+      "category": "Content",
+      "summary": "Long-form article text set from plain HTML, with a reading measure.",
+      "storybook": {
+        "title": "Components/Prose",
+        "docs": "?path=/docs/components-prose--docs"
+      },
+      "patterns": [
+        "components-prose--article-body"
+      ]
+    },
     {
       "name": "Radio",
       "tier": "atom",
@@ -547,6 +595,20 @@
       },
       "patterns": []
     },
+    {
+      "name": "SectionCaption",
+      "tier": "atom",
+      "category": "Content",
+      "summary": "Small uppercase mono caption over a page column, on a rule, with an optional action.",
+      "storybook": {
+        "title": "Components/SectionCaption",
+        "docs": "?path=/docs/components-sectioncaption--docs"
+      },
+      "patterns": [
+        "components-sectioncaption--column-caption",
+        "components-sectioncaption--with-action"
+      ]
+    },
     {
       "name": "SegmentedControl",
       "tier": "molecule",
@@ -730,6 +792,7 @@
       "patterns": [
         "components-textlink--external-destination",
         "components-textlink--inline-prose",
+        "components-textlink--quiet-title",
         "components-textlink--supporting-copy"
       ]
     },
@@ -797,7 +860,9 @@
   ],
   "guides": [
     "Guides/Chart explorations",
+    "Guides/Filter panel",
     "Guides/Overlay flows",
+    "Guides/Post page",
     "Guides/Profile typography"
   ]
 }

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

@@ -0,0 +1,29 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { useState } from "react";
+import { Accordion, CheckboxGroup, SectionCaption } from "@thewhatmatters/wmds";
+
+export function TopicFilter() {
+  const [topics, setTopics] = useState<string[]>([]);
+  const [years, setYears] = useState<string[]>([]);
+  return (
+    <div className="flex w-64 flex-col">
+      <SectionCaption>Filters</SectionCaption>
+      <Accordion variant="plain" flush>
+        <Accordion.Item label="Topic" defaultOpen>
+          <CheckboxGroup label="Topic" labelHidden size="sm" values={topics} onValuesChange={setTopics}>
+            <CheckboxGroup.Item value="guides" label="Guides" count={2} />
+            <CheckboxGroup.Item value="notes" label="Notes" count={1} />
+          </CheckboxGroup>
+        </Accordion.Item>
+        <Accordion.Item label="Year">
+          <CheckboxGroup label="Year" labelHidden size="sm" values={years} onValuesChange={setYears}>
+            <CheckboxGroup.Item value="2026" label="2026" count={3} />
+          </CheckboxGroup>
+        </Accordion.Item>
+      </Accordion>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — dropdown row
+// @thewhatmatters/wmds@0.4.1 · 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

@@ -0,0 +1,25 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { Badge } from "@thewhatmatters/wmds";
+
+export interface PostTag {
+  label: string;
+  href: string;
+}
+
+export function PostTags({ author, categories }: { author: string; categories: PostTag[] }) {
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge emphasis="outline" mono>
+        {author}
+      </Badge>
+      {categories.map((category) => (
+        <Badge key={category.href} emphasis="outline" mono render={<a href={category.href} />}>
+          {category.label}
+        </Badge>
+      ))}
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — with avatar
+// @thewhatmatters/wmds@0.4.1 · 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-button-button--copy-button.tsx

@@ -0,0 +1,39 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { useEffect, useState } from "react";
+import { Copy } from "lucide-react";
+import { Button, buttonStatusHoldMs, type ButtonStatus } from "@thewhatmatters/wmds";
+
+export function CopyButton({ text, label }: { text: string; label: string }) {
+  const [status, setStatus] = useState<ButtonStatus>("idle");
+
+  useEffect(() => {
+    if (status !== "success" && status !== "error") return;
+    const timer = window.setTimeout(() => setStatus("idle"), buttonStatusHoldMs);
+    return () => window.clearTimeout(timer);
+  }, [status]);
+
+  async function copy() {
+    try {
+      await navigator.clipboard.writeText(text);
+      setStatus("success");
+    } catch {
+      setStatus("error");
+    }
+  }
+
+  return (
+    <Button
+      role="secondary"
+      size="sm"
+      icon={<Copy />}
+      status={status}
+      statusLabels={{ success: "Copied", error: "Couldn't copy" }}
+      onClick={copy}
+    >
+      {label}
+    </Button>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — destructive action
+// @thewhatmatters/wmds@0.4.1 · 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

@@ -0,0 +1,30 @@
+// @thewhatmatters/wmds@0.4.1 · 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.
+
+import { Button } from "@thewhatmatters/wmds";
+
+export function ShareLinks({ url, title }: { url: string; title: string }) {
+  const encodedUrl = encodeURIComponent(url);
+  const encodedTitle = encodeURIComponent(title);
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button
+        role="secondary"
+        size="sm"
+        external
+        render={<a href={"https://x.com/intent/post?url=" + encodedUrl + "&text=" + encodedTitle} />}
+      >
+        Twitter/X
+      </Button>
+      <Button
+        role="secondary"
+        size="sm"
+        external
+        render={<a href={"https://www.linkedin.com/sharing/share-offsite/?url=" + encodedUrl} />}
+      >
+        LinkedIn
+      </Button>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.0 · Pattern — ghost action
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — inverse action
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — link
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — submit / async
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — outline mono
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — primary action
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — row (hug)
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — row
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — secondary action
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — suggestion pills
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — with count
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — with icon
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — vertical actions
+// @thewhatmatters/wmds@0.4.1 · 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.0 · Pattern — skip in footer
+// @thewhatmatters/wmds@0.4.1 · 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.