@thewhatmatters/wmds 0.4.7 → 0.4.8

package/docs/components.md

@@ -1,6 +1,6 @@
 # @thewhatmatters/wmds — component contracts
 
-Version 0.4.7. Generated from the WMDS repository's AGENTS.md (Storybook-first) by `scripts/generate-package-docs.mjs` — do not edit here.
+Version 0.4.8. 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.
 
@@ -39,8 +39,11 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **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** (`metadataSide` `start` / `end` and `metadataColumns` 4 / 3 place the panel — never edit its classes). 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** (`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`; 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** (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**.
+- **LinkTile:** a resource tile that is one link — `title`, `href` (or `render={<Link href />}` for a router link), `media` (an `<img>` or `next/image` with its `width` and `height`; one image, not a video), `meta` (one line, for example the domain), optional `tag` (a **Badge**, over the image's top-start corner) and `source` (**Avatar** `size="xsm"` or a 20px favicon, before the title). The whole tile is the anchor: one hit area, one focus ring; never put a link or a button inside it. `external` opens a new tab with a safe `rel`, the trailing mark **TextLink** uses, and spoken "(opens in a new tab)" — never hand-write `target`. Screen readers hear the title, the meta, the tag, then the new-tab hint; the image's `alt` is not in the link's name. The image keeps its own ratio by default, so tiles vary in height and hold their space before the image loads; `ratio` (width / height, `4 / 3`) fixes the frame and crops the image. A hairline inside the frame keeps an edge on a light image in light mode and a dark image in dark mode; hover and focus darken it and underline the title. `loading` is a **Skeleton** placeholder, not a link. `className` is layout only. Not a **Card** (a surface with slots that can hold several controls). Paste **Components/LinkTile → Pattern — resource tile** or **Pattern — router link**. See **ADR-0044**.
+- **TileGrid:** a grid of tiles on the grid gutter — **TileGrid.Item** children, each with a stable `key`, and `aria-label` or `aria-labelledby`. `layout` `masonry` (default — tiles keep their heights and pack; each next item goes to the shortest column) or `uniform` (rows of equal height; give the tiles a `ratio`). `columns` — one number or `{ base, sm, md, lg, xl }` (default `{ base: 1, sm: 2, lg: 3 }`). Reading order and tab order are the order of the items in both layouts — across the top row, then down the page; never use CSS columns or `order`. `empty` replaces the tiles when there are none; `busy` marks a grid of placeholders. Masonry packs after it measures: the server and the first paint show aligned rows, then the tiles close up (one column needs no packing); the space under a tile is the 2rem row gap, within 3px. On a server-rendered page that is one instant move at hydration — nothing slides or fades — on grids of two or more columns; `uniform` is CSS alone and does not move at all, so use it where that move is not acceptable. When the items change, the ones that stay move and the others fade; reduced motion changes at once. `className` is layout only. Not dated rows (**IndexList**) or a row to drag (**Carousel**). Paste **Components/TileGrid → Pattern — tile grid**; with filters, **Guides/Filter panel → Pattern — filtered grid**. See **ADR-0044**.
+- **FilterPanel:** checkbox filters for an index page — **FilterPanel** (no element; holds `groups`, `selection` + `onSelectionChange`, `resultsLabel` such as "3 posts", optional `labels`) around the page, with **FilterPanel.Rail** (`aside`: **SectionCaption** "Filters" with Clear all, flush **Accordion** groups of **CheckboxGroup** with counts), **FilterPanel.Trigger** (**Button** `secondary` with the number of options on), and **FilterPanel.Sheet** (the same groups in a bottom **Sheet**; Clear all · Show N). Show the rail and the trigger at opposite breakpoints with `className` (`hidden md:col-span-3 md:block` / `md:hidden`). Helpers: `useFilterSelection({ defaultSelection, selection, onSelectionChange })`, `matchesFilterSelection(facets, selection)` (alternatives within a group, combined across groups), `countFilterOptions(groups, items, label)`, `filterSelectionCount(selection)`. Never write a count into an option label. Not a single choice (**Select**, **SegmentedControl**). Paste **Components/FilterPanel → Pattern — filter panel**; the full pages are **Guides/Filter panel → Pattern — filtered index** and **Pattern — filtered grid** (the grid also takes `renderLink` — the router's link for a tile — and `renderImage` — the app's image component; both take `overlay` for page-level layers such as **GridOverlay**, as does **Guides/Post page → Pattern — post page** — never add elements to a pasted pattern's markup). See **ADR-0044**.
 - **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**.
@@ -51,13 +54,13 @@ Storybook paths such as **Components/Button/Button → Pattern — …** name a
 - **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.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**.
+- **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 **FilterPanel**.
 - **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**. **Dropdown.Item** `render={<a href />}` makes a row a link (a menu of links — **Breadcrumb**'s collapsed path).
 - **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**.
 - **Toast:** temporary notification organism — mount one **`Toaster`** at the app root (it renders nothing on the server and mounts its list after hydration, so a layout can hold it) and call **`toast.add()`** / `update()` / `dismiss()`. Six `position` values (top/bottom × left/center/right), default five-item layered deck (newest interactive in front, older surfaces offset behind), semantic tones, optional action (**Button**) and dismiss (**IconButton**). Errors announce as `alert`; other tones as `status`. `duration: null` persists. Blocking decisions use **AlertDialog**. See **ADR-0025**.
 - **Confetti:** celebratory burst — mount one **`ConfettiProvider`**. After an async success, render the confirmation surface and call **`useConfettiOnMount(options?)`** there (once per mount; a ref skips StrictMode and re-renders). **`useConfetti().fire(options?)`** is the same burst when the moment is not a mount. `origin` is an element, a ref (center of the box), or a viewport `{ x, y }` point; default is the viewport center. Confirmation pages pass the top-center of the viewport and a wide `spread`. Overlapping bursts are kept. Removed `duration + 0.5s` after start. Reduced motion: `fire()` does nothing. Colors default to chart categorical 1–7 (`confettiDefaultColors`). There is no trigger component. **IntakeConfirmation** is the reference composition. See **ADR-0031**.
-- **Dialog:** modal overlay — portal scrim, focus trap, scroll lock, **medium** enter/exit; composes **Card** shell + **IconButton** close. **`Dialog.Content`** — `title`, `description`, `footer`, `size` (`sm` | `md` | `lg`); header/footer pinned, body scrolls; **no section hairlines** — brief/direct copy + `gap-4` section rhythm. **`AlertDialog`** — blocking confirm with cancel + confirm **Button** roles; `confirmRole="destructive"` for irreversible actions; scrim dismiss off by default.
+- **Dialog:** modal overlay — portal scrim, focus trap, scroll lock, **medium** enter/exit; composes **Card** shell + **IconButton** close. **`Dialog.Content`** — `title`, `description`, `footer`, `size` (`sm` | `md` | `lg` | **`full`** — the window less a margin, up to 90rem × 60rem, and the whole screen on phones: media viewers and detail views), `headerEnd` (**IconButton** `size="sm"` actions before the close — previous / next), `aria-labelledby` (names the dialog from a heading in the body when there is no `title`); header/footer pinned, body scrolls; **no section hairlines** — brief/direct copy + `gap-4` section rhythm. **`AlertDialog`** — blocking confirm with cancel + confirm **Button** roles; `confirmRole="destructive"` for irreversible actions; scrim dismiss off by default.
 - **IntakeModal:** full-screen Start a project shell — typographic **WM** + **WhatMatters** wordmark (no separate logo asset), **IconButton** close (Lucide **X**, name **Close**), **StepProgress** (navy segments, pill label **Step N of 4**), pinned **Back** / **Continue** footer. Focus trap, Escape, scroll lock, `aria-modal`. **SelectableCard** is the multi-select grid (2 columns mobile, 3 from `lg`) with a `toggle` slot for hugged **SegmentedControl** and a **Badge** `iconOnly` check. **PillGroup** is the wrapping radio pills; **Not sure yet** uses existing **Badge** neutral `emphasis="muted"` — no new Badge emphasis. **IntakeForm** is **Field** + **Input** / **TextArea** (optional Link URL); required fields show `status` + `message` on blur; company and link stay optional, and `company={false}` / `link={false}` leave them out (the short form — name, email, details — which **Pattern — start a project gate** uses; their values stay empty in `IntakeAboutValues`); the details counter is the field description. **CalEmbed** is the calendar frame plus **TextLink** skip; with no embed mounted it shows a visitor-facing empty state (`emptyTitle`, `emptyDescription`), never developer notes. **CalEmbed.Skip** is that same skip; in a **Card** gate put it in **Card.Footer** and pass `skip={false}` so the in-body link is omitted. **IntakeConfirmation** (`booked` | `emailed`) calls **`useConfettiOnMount`** with `intakeConfettiColors` (includes `--color-brand`); optional `bookingTime` / `videoHref` / `googleCalendarHref` / `icsHref` reuse **TextLink** and **Button**. Copy **Components/IntakeModal → Pattern — intake modal** and compose the steps in the app. See **ADR-0038**.
 - **Sheet:** dismissible edge overlay — `side="bottom" | "end" | "start"` only (**no `top`** — not a product pattern); same scrim/focus/scroll lock as **Dialog**; bottom drawer or side detail rail; header/footer pinned, body scrolls; **hairline borders** on scroll regions. Mobile **16px inset on trailing edge only** (e.g. `end` → left gap for scrim; entry/top/bottom flush); tablet+ side sheets fully edge-flush. **`Sheet.Content`** — Card header rhythm, scrollable body, optional footer.
 - **Panel:** persistent edge flyover — `side="end" | "start"` only; **non-blocking visual scrim** (clicks pass through), **no scroll lock**, **no focus trap**; `aria-modal="false"`; page stays interactive. Same width tokens and hairline scroll chrome as **Sheet** side panels. Use for peek/detail rails; use **Sheet** when the canvas should block.

package/docs/exports.json

@@ -1,6 +1,6 @@
 {
   "package": "@thewhatmatters/wmds",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "import": "import { Button } from \"@thewhatmatters/wmds\";",
   "styles": [
     "@thewhatmatters/wmds/styles.css",
@@ -317,6 +317,19 @@
         "components-field--multi-control"
       ]
     },
+    {
+      "name": "FilterPanel",
+      "tier": "organism",
+      "category": "Form controls",
+      "summary": "Checkbox filters for an index page: a side rail from tablet up and the same groups in a bottom Sheet on phones.",
+      "storybook": {
+        "title": "Components/FilterPanel",
+        "docs": "?path=/docs/components-filterpanel--docs"
+      },
+      "patterns": [
+        "components-filterpanel--panel"
+      ]
+    },
     {
       "name": "FloatingActionButton",
       "tier": "molecule",
@@ -467,6 +480,20 @@
         "components-kbd--shortcut"
       ]
     },
+    {
+      "name": "LinkTile",
+      "tier": "molecule",
+      "category": "Navigation",
+      "summary": "A resource tile that is one link: a preview image with a name, where it lives, and an optional tag.",
+      "storybook": {
+        "title": "Components/LinkTile",
+        "docs": "?path=/docs/components-linktile--docs"
+      },
+      "patterns": [
+        "components-linktile--resource-tile",
+        "components-linktile--router-link"
+      ]
+    },
     {
       "name": "MoreMenu",
       "tier": "organism",
@@ -841,6 +868,19 @@
         "components-textsequence--shapes"
       ]
     },
+    {
+      "name": "TileGrid",
+      "tier": "molecule",
+      "category": "Layout",
+      "summary": "A grid of tiles that pack as masonry or sit in equal rows, in reading order either way.",
+      "storybook": {
+        "title": "Components/TileGrid",
+        "docs": "?path=/docs/components-tilegrid--docs"
+      },
+      "patterns": [
+        "components-tilegrid--masonry"
+      ]
+    },
     {
       "name": "Toast",
       "tier": "organism",
@@ -892,6 +932,7 @@
     "Guides/Filter panel",
     "Guides/Overlay flows",
     "Guides/Post page",
-    "Guides/Profile typography"
+    "Guides/Profile typography",
+    "Guides/Resource detail"
   ]
 }

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

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — flush
+// @thewhatmatters/wmds@0.4.8 · 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-avatar--dropdown-row.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — dropdown row
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — outline tags
+// @thewhatmatters/wmds@0.4.8 · 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--with-avatar.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — with avatar
+// @thewhatmatters/wmds@0.4.8 · 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-breadcrumb--editorial.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — editorial
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — long path
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — path
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — router links
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — copy button
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — destructive action
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — external link
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — ghost action
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — inverse action
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — link
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — submit / async
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — outline mono
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — primary action
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — row (hug)
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — row
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — secondary action
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — suggestion pills
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — with count
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — with icon
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — vertical actions
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — skip in footer
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Example — body slot (occupancy history)
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — headerless media
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — outlined layout
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — pinned height
+// @thewhatmatters/wmds@0.4.8 · 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-selectablecard--selectable-cards-pattern.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — selectable cards
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — image carousel
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — matrix heatmap
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — Cartesian no-data gaps
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — occupancy history in Card
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — occupancy KPI in Card
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — distribution strip
+// @thewhatmatters/wmds@0.4.8 · 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.7 · Pattern — ranked audience breakdown
+// @thewhatmatters/wmds@0.4.8 · 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--unit-grid-composition.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — 100-unit composition
+// @thewhatmatters/wmds@0.4.8 · 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.
 

package/docs/patterns/components-chatdock--pattern-chat-dock.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — chat dock
+// @thewhatmatters/wmds@0.4.8 · Pattern — chat dock
 // Storybook: Components/ChatDock → Pattern — chat dock (?path=/story/components-chatdock--pattern-chat-dock)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chatdock--pattern-start-project-gate.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — start a project gate
+// @thewhatmatters/wmds@0.4.8 · Pattern — start a project gate
 // Storybook: Components/ChatDock → Pattern — start a project gate (?path=/story/components-chatdock--pattern-start-project-gate)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-chatqa--pattern-qa-with-reply.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — Q&A with reply
+// @thewhatmatters/wmds@0.4.8 · Pattern — Q&A with reply
 // Storybook: Components/ChatQa → Pattern — Q&A with reply (?path=/story/components-chatqa--pattern-qa-with-reply)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkbox--default.tsx

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

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

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

package/docs/patterns/components-checkbox-checkbox--with-description.tsx

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

package/docs/patterns/components-checkbox-checkboxgroup--default.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — default
+// @thewhatmatters/wmds@0.4.8 · Pattern — default
 // Storybook: Components/Checkbox/CheckboxGroup → Pattern — default (?path=/story/components-checkbox-checkboxgroup--default)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-checkbox-checkboxgroup--option-counts.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — option counts
+// @thewhatmatters/wmds@0.4.8 · Pattern — option counts
 // Storybook: Components/Checkbox/CheckboxGroup → Pattern — option counts (?path=/story/components-checkbox-checkboxgroup--option-counts)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-descriptionlist--details.tsx

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

package/docs/patterns/components-descriptionlist--post-metadata.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — post metadata
+// @thewhatmatters/wmds@0.4.8 · Pattern — post metadata
 // Storybook: Components/DescriptionList → Pattern — post metadata (?path=/story/components-descriptionlist--post-metadata)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-dialog--alert-dialog-destructive.tsx

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

package/docs/patterns/components-dialog--default-dialog.tsx

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

package/docs/patterns/components-dialog--form-dialog.tsx

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

package/docs/patterns/components-displaycontrols--page-utilities.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — page display controls
+// @thewhatmatters/wmds@0.4.8 · Pattern — page display controls
 // Storybook: Components/DisplayControls → Pattern — page display controls (?path=/story/components-displaycontrols--page-utilities)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-field--horizontal-input.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — horizontal input
+// @thewhatmatters/wmds@0.4.8 · Pattern — horizontal input
 // Storybook: Components/Field → Pattern — horizontal input (?path=/story/components-field--horizontal-input)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-field--horizontal-text-area.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — horizontal textarea
+// @thewhatmatters/wmds@0.4.8 · Pattern — horizontal textarea
 // Storybook: Components/Field → Pattern — horizontal textarea (?path=/story/components-field--horizontal-text-area)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
 

package/docs/patterns/components-field--multi-control.tsx

@@ -1,4 +1,4 @@
-// @thewhatmatters/wmds@0.4.7 · Pattern — multi-control
+// @thewhatmatters/wmds@0.4.8 · Pattern — multi-control
 // Storybook: Components/Field → Pattern — multi-control (?path=/story/components-field--multi-control)
 // Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.