@thewhatmatters/wmds 0.4.0 → 0.4.2

package/CHANGELOG.md

@@ -7,6 +7,88 @@ Every release of `@thewhatmatters/wmds` is listed here, newest first.
 - **Pasted patterns:** when a release changes a **Pattern — …** story's Show code, it is named under Consumer actions so apps re-copy it.
 - **How to add an entry** (contributors): add your change to the top entry. If that version is already on npm (`npm view @thewhatmatters/wmds versions`), start a new entry above it and bump `version` in `package.json` to match. `npm run check:changelog` enforces the format.
 
+## 0.4.2
+
+**Breadcrumb** — the path to the current page, after the shadcn/ui breadcrumb: links from the root, a separator between them, the current page last, and a long path folded into a "…" menu of links. See **ADR-0042**.
+
+- **Breadcrumb** (new) — pass `items` (`{ label, href }`; the last item, without `href`, is the current page). Above `maxItems` (default 4) the first item and the last two stay and the middle folds into a "…" control; it opens a menu of the hidden links, with focus on the first, arrow keys between them, and Escape back to the control. Long labels truncate. `separator`: `chevron` (default) or `slash`. `variant`: `sans` (default) or `mono` (eyebrow caps). `renderLink` routes every link through your router (`(item) => <Link href={item.href} />`). New **Pattern — path**, **Pattern — long path**, **Pattern — router links**, and **Pattern — editorial**.
+- **Dropdown.Item** `render` — compose a row onto another element, such as `render={<a href />}` for a menu of links.
+- **Guides/Post page → Pattern — post page** — a mono, slash-separated **Breadcrumb** above the title. `PostPageData` gains `breadcrumb`.
+
+### Consumer actions
+
+1. **WhatMatters site, post page: re-copy Guides/Post page → Pattern — post page** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-post-page--post-page.tsx`) and re-apply only your content, data, and handlers. Pass `breadcrumb` in `PostPageData`, ending with the post — for example `[{ label: "Home", href: "/" }, { label: "Blog", href: "/blog" }, { label: post.title }]`, with the post's category between Blog and the title if you link categories. To route crumbs through Next, pass `renderLink={(item) => <Link href={item.href} />}` on the pattern's **Breadcrumb**.
+2. **WhatMatters site, other deep pages** (a resource category, a case study): add `<Breadcrumb items={…} />` above the page title — `variant="mono" separator="slash"` on editorial pages, to match the post page.
+3. Other apps: none. **Breadcrumb** and **Dropdown.Item** `render` are new and optional.
+
+## 0.4.1
+
+**ChatDock:** follow-ups in the open window, actions and a match score under each reply, a Start a project gate in the composer's place, the visitor's messages on a brand tint, and a new open and close transition.
+
+- **`followUps`** — predefined next questions for the latest reply, the same items as `suggestions`. They show under the reply (`followUpsPlacement="inline"`, the default; `"composer"` pins them as pills above the composer), hide while `thinking`, and disappear the moment the visitor sends. Choosing one calls `onSuggestionSelect`, then `onSend` with its `prompt`. A follow-up's `icon` is not shown: inline rows all lead with a corner-down-right arrow, and pills above the composer are text only. **Components/ChatDock → Pattern — chat dock** now keeps the follow-up state: `ask` may resolve with `string | { reply, followUps? }`.
+- **Reply row** — under each finished reply: **Copy** (the message's `copyText`), thumbs up and down (shown when `onMessageFeedback` is passed, on replies that carry `feedback` — `"up" | "down" | null`, `null` until the visitor votes; pressing the active thumb clears it), and a short muted note (`meta: { label, description? }`, for example "Match 99%", with `description` read to screen readers). Each part shows on its own. Where the pointer can hover, the row shows while the reply is hovered or holds focus; on touch screens it is always shown. It keeps its place either way, so the thread never moves, and it stays empty while the latest reply is still arriving (`thinking`). Buttons are 44px on phones. New labels `copy`, `copied`, `helpful`, `notHelpful`; new types `ChatDockFeedback` and `ChatDockMessageMeta`.
+- **`gate`** and **ChatDock.Gate** — a multi-step form in the composer's place, with the conversation above it. Setting `gate` opens the window and moves focus into it; the composer, suggestion rows, follow-ups, and disclaimer step aside, and come back with focus when it is cleared. The two crossfade while the area eases between their heights. The gate hugs each step up to a cap that keeps the last lines of the latest reply in view, then its body scrolls. Escape belongs to the gate (it closes it); the window's close keeps the gate, with its progress, for when the window reopens. **ChatDock.Gate** (`ChatDockGate`) is the shell: the step's title and subtitle with previous, "2 of 4", next, and close; the step in a scrolling body that slides between steps; a footer with a start slot, Cancel, and Next. 44px controls on phones. New **Pattern — start a project gate**.
+- **Phones:** the full-screen window and the composer stay inside the part of the screen a keyboard leaves visible. The conversation takes keyboard focus so it can be scrolled without a mouse.
+- **`useKbdChoiceKeys`** takes a `scope`: digits act only while focus is inside that element. A focused checkbox or radio now takes digits too (only text entry is skipped).
+- **IconButton `pressed`** — the toggle pattern: sets `aria-pressed` and, while on, shows the pressed fill and a filled glyph.
+- **Open and close.** The resting bar and the window are one object: one composer serves both states and stays on screen every frame. From `md` the window is an opaque card that grows up and out of the bar from its bottom edge; the mark moves to the header, the composer keeps its width and rises only by the disclaimer line, and the header, conversation, and rows fade in after it. Closing fades them and folds the window back into the bar, and the hover pills return once it has folded. On phones the window rises from the bottom edge to full screen and falls back. Escape while opening, or a click while closing, reverses from where it is. Reduced motion crossfades the window in place.
+- **PromptBar:** the `start` slot takes its content's width (an **Avatar** `size="md"` is unchanged), so a caller can fold the mark away.
+- The visitor's messages sit on a light navy tint, so they read apart from the replies. New color token `--color-brand-tint` (`bg-brand-tint`): 10% navy in light, a lifted navy in dark.
+- **Fix:** choosing a suggestion row in the open window (by click or Enter) moves focus to the composer. The rows leave once the first message lands, and focus used to fall to the page, so Escape no longer closed the window.
+
+**Index pages** — what the whatmatters.so blog index placed by hand. See **ADR-0040**.
+
+- **IndexList** (new) — editorial index rows: **IndexList.Item** with `meta` (a `<time>`), a linked `title` (`href`; a quiet **TextLink** in an `h2`, `titleAs` to change it), and an optional `preview` that an **IconButton** at the row's end expands under the title (`defaultOpen`, or `open` / `onOpenChange`). `captions={{ meta, title }}` (sentence case — the "/" marker and rule come with them) sit over the rows on the same tracks. Two tracks (7.5rem meta, then the title, with the page grid's column gap) once the list is 32rem wide — a container query — and one column below, captions hidden. `size`: `lg` (type-display-3, default), `md`, `sm`. `empty` takes the rows' place when there are none. New **Pattern — post index**.
+- **Guides/Filter panel → Pattern — filtered index** (new) — the filtered index page: a "/ Filters" panel of collapsible checkbox groups with counts and Clear all beside an **IndexList**, a live count in the title and a visually hidden status line, and below `md` a Filters button (with the number of filters on) that opens the same groups in a bottom **Sheet** with Clear all and Show N posts.
+- **Checkbox** and **CheckboxGroup.Item** `count` — a muted number at the row's end, styled like **NavList** counts. Screen readers hear it after the label in parentheses: "Guides (2)", or "Guides (2 posts)" with `countLabel`.
+- **`type-eyebrow`** — small uppercase mono caption (`typographyClass("eyebrow")`) for editorial labels such as "/ Filters" and "/ Date". `components.md` → Theme tokens says when to use it.
+- **TextLink `variant`** — `prose` (default, unchanged) or `quiet`: no underline at rest, an underline scaled to the text on hover and focus, the same focus ring, and the size and weight of the heading around it. A wrapped quiet link draws its focus ring on every line. New **Pattern — quiet title link**; new exports `textLinkVariants` and `TextLinkVariant`.
+- **Accordion `flush`** (plain variant) — no horizontal inset, so labels and panels line up with the text around the accordion; the trigger's hover band reaches 8px past each edge. New **Pattern — flush**.
+- **Fix:** a closed **Accordion** panel — any `.motion-collapse` with `data-visible="false"` — turns `visibility: hidden` once its fold ends, so Tab skips its controls and screen readers skip its content. It opens visible at once.
+
+**Post pages** — what the whatmatters.so blog post page placed by hand. See **ADR-0041**.
+
+- **DescriptionList** (new) — name-and-value rows as `dl` / `dt` / `dd`. **DescriptionList.Item** takes a `name` and a value (text, `<time>`, **Badge** tags, or **Button** actions). `layout`: `inline` (value beside the name, 2 : 3, default) or `stacked` (value under it), per list or per row. `rule`: `solid` (default), `dotted` (the quieter hairline), or `none`. `variant`: `sans` (caption name, body value) or `mono` (eyebrow name, mono caps value, tabular figures). New **Pattern — post metadata** and **Pattern — details**.
+- **SectionCaption** (new) — the "/ Metadata" caption over a page column: `type-eyebrow` on an emphasized rule, the "/" marker hidden from screen readers, `as` (`h2` default, or `p`), and an `end` slot for a **Button** `size="xs"`. New **Pattern — column caption** and **Pattern — caption with an action**. **IndexList** captions and **Guides/Filter panel** use it (their rule is now the emphasized hairline).
+- **Prose** (new) — long-form content from plain HTML elements: headings, paragraphs, lists, quotes, inline code, code blocks, rules, images, figures, and tables, with the spacing between them. `size="lg"` (default) sets `type-reading`; `size="md"` keeps `type-body`. `measure="reading"` (default) caps lines at 40rem. New **Pattern — article body**.
+- **`type-reading`** — long-form text, 17px at a 28px line (`typographyClass("reading")`).
+- **Badge** `emphasis="outline"` (hairline, transparent fill), `mono` (mono caps, as **Button** `mono`), and `render` — `render={<a href />}` makes a tag a link, with a hover underline, the focus ring, and a 44px-tall hit area. New **Pattern — outline tags**.
+- **Button** `status` works with `icon`: the icon morphs into the status glyph, and the result is announced. New export `buttonStatusHoldMs` (2000) for how long a confirmation holds. New **Pattern — copy button**.
+- **Button** `external` (with `render={<a href />}`): opens a new tab with a safe `rel`, adds a visually hidden "(opens in a new tab)", and shows **TextLink**'s trailing icon (`externalIcon={false}` drops it). New **Pattern — external link**.
+- **Button** and **Badge** set their own text case: inside an `uppercase` parent (a mono **DescriptionList**), their labels no longer turn to capitals. `mono` still sets caps.
+- **Guides/Post page → Pattern — post page** (new) — the display title, the metadata panel in 4 of 12 columns (sticky from `lg` under the pinned **SiteNav**), and the article in 8; below `lg` the panel stacks above the article.
+
+### Consumer actions
+
+1. **WhatMatters site: re-copy Components/ChatDock → Pattern — chat dock** (`node_modules/@thewhatmatters/wmds/docs/patterns/components-chatdock--pattern-chat-dock.tsx`) over `components/ask-whatmatters.tsx`, and re-apply only your content, data, and handlers. The pattern now holds the follow-up state, each reply's vote, and the Start a project gate's open state; `onStartProject` is gone.
+2. **Paste Components/ChatDock → Pattern — start a project gate** (`node_modules/@thewhatmatters/wmds/docs/patterns/components-chatdock--pattern-start-project-gate.tsx`) as `components/start-project-gate.tsx`. Replace the services, budgets, and step copy with yours, and pass your calendar through `renderCalendar` (call `booked` when the visitor confirms a time).
+3. **Wire the gate where you mount `AskWhatMatters`**, and remove the `Dialog` intake:
+   - Hold `const [startProject, setStartProject] = useState<StartProjectRequest | null>(null)` and pass `startProject={startProject}` and `onStartProjectChange={setStartProject}`. Site buttons that opened the intake `Dialog` call `setStartProject({})` instead.
+   - Pass `renderStartProject={(slot) => <StartProjectGate {...slot} onSubmit={sendIntake} renderCalendar={yourCalendar} />}`, where `sendIntake` posts the intake as the `Dialog` did.
+   - Delete the intake `Dialog`, its open state, and its **IntakeConfirmation** step. Keep one **ConfettiProvider** at the app root; the gate fires the burst when it finishes.
+4. **Return follow-ups, the score, the copy text, and Start a project requests from `ask`** for the replies that have them: resolve with `{ reply, followUps?, meta?, copyText?, startProject? }`.
+   - `followUps`: one to three items, each `{ id, label, prompt? }`. Leave out `icon`; it is not shown. An item without a `prompt`, such as `{ id: "start", label: "Start a project" }`, opens the gate.
+   - `startProject`: `{ services?, budget? }` with what the assistant picked up; the gate opens with them filled in.
+   - `meta`: the score, for example `{ label: "Match 99%", description: "How sure the assistant is that it matched your question." }`. Your app computes it; leave it out when there is none.
+   - `copyText`: what **Copy** puts on the clipboard. The pattern uses the reply text when you leave it out.
+   - Replies with none of these can keep resolving with the reply string.
+5. **Handle `onFeedback`** where you mount `AskWhatMatters`: `onFeedback={(reply, value) => …}`. `value` is `"up"`, `"down"`, or `null` when the visitor clears their vote; store it against `reply.id`. The prop is required, so TypeScript flags the mount until you add it.
+6. **The open and close transition:** nothing to do. It comes with the upgrade.
+7. **WhatMatters site, blog index: replace `components/blog-index.tsx` with Guides/Filter panel → Pattern — filtered index** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-filter-panel--filtered-index.tsx`). Map each post to `FilteredPost` (`facets: { topic: post.topic }`, `dateLabel` from your date formatter) and your topics to one `FilterGroupDef` (`{ id: "topic", label: "Topic", options }`), then render `<FilteredIndex title={copy["blog-title"]} posts={posts} groups={groups} />`. If the page already sits inside a `<main>`, change the pattern's `main` to a `div`. The pattern replaces these hand-placed parts of `components/blog-index.tsx`:
+   - the rows' two-track grid (`grid-cols-[7.5rem_1fr]`, `border-b border-border py-4`) with the date and a **TextLink** title → **IndexList** + **IndexList.Item** (`meta={<time dateTime={post.date}>…</time>}`, `title`, `href`, `preview` for the description);
+   - the "/ DATE" and "/ NAME" captions → **IndexList** `captions={{ meta: "Date", title: "Name" }}`;
+   - the "/ FILTERS" caption built from `type-code uppercase text-muted` → **SectionCaption** with Clear all in its `end`;
+   - the always-open Topic **CheckboxGroup** with the count written into each label ("Guides (2)") → an **Accordion** `variant="plain"` `flush` group of **CheckboxGroup.Item** with `count` and `countLabel`;
+   - and it adds Clear all, the empty state, the announced post count, and the phone **Sheet**.
+8. **If you keep your own blog index instead**, make the same swaps by hand: the row grid → **IndexList**; `type-code uppercase text-muted` captions → **SectionCaption**; `label="Guides (2)"` → `label="Guides" count={2} countLabel="2 posts"`; a large linked title → `<TextLink variant="quiet">` inside its heading. The Topic group can now collapse: closed panels leave the tab order.
+9. **WhatMatters site, blog post page: paste Guides/Post page → Pattern — post page** (`node_modules/@thewhatmatters/wmds/docs/patterns/guides-post-page--post-page.tsx`) and render it from `app/blog/[slug]/page.tsx` as `<PostPage post={post}>{body}</PostPage>`, where `body` is the rendered markdown. Fill `PostPageData`: `markdown` is the post file's source, `markdownHref` your plain-markdown route, `url` the post's address. If the page already sits inside a `<main>`, change the pattern's `main` to a `div`. Then:
+   - **`components/post-meta.tsx` — delete it.** Its hand-built `<dl>` (two-track `grid-cols-[2fr_3fr]` rows with `border-b border-border py-3`, `type-code text-muted uppercase` names, `type-code text-fg uppercase tabular-nums` values) is **DescriptionList** `variant="mono"` `rule="dotted"`; the author and category `Badge size="sm" emphasis="muted"` are **Badge** `emphasis="outline"` `mono`, with `render={<a href />}` on each category; the share buttons' hand-written `target`, `rel`, and visually hidden "(opens in a new tab)" are **Button** `external`.
+   - **`components/copy-text-button.tsx` — delete it.** Its Copy → Check icon swap, "Copied" label, two-second timer, and `role="status"` text are **Button** `icon={<Copy />}` with `status` and `statusLabels`, held for `buttonStatusHoldMs` — the pattern's `CopyButton` (also **Components/Button/Button → Pattern — copy button**).
+   - **`components/section-caption.tsx` — delete it** and import **SectionCaption** where it was used. Pass the caption in sentence case ("Metadata", not "/ METADATA"); the marker and the `border-border-emphasized` rule come with it.
+   - **`components/markdown.tsx` — keep `compiler(…)`, drop the class map.** Keep the `h1` → `h2` and `a` → `MarkdownLink` (**TextLink** `external`) overrides; delete `blocksClasses`, the other class constants and overrides, and `MarkdownTable`, and return the compiled output without a wrapper `div`. The post page puts it in **Prose**; for a resource category's notes wrap it in `<Prose size="md">` (add `measure="none"` to fill the column). Long-form text moves from 14px (`type-body`) to 17px (`type-reading`).
+10. **If you keep your own post page instead**, make the same swaps by hand: the `<dl>` → **DescriptionList**; muted badges → **Badge** `emphasis="outline"` `mono`; the copy swap → **Button** `icon` + `status`; hand-written new-tab links → **Button** `external`; the caption → **SectionCaption**; the markdown class map → **Prose**.
+11. Other apps: none. The tint comes with the upgrade; **IconButton**'s `pressed`, **ChatDock**'s `gate`, **useKbdChoiceKeys**' `scope`, **Checkbox** `count`, **TextLink** `variant`, **Accordion** `flush`, **Badge** `emphasis="outline"` / `mono` / `render`, and **Button** `external` are optional. A **Button** or **Badge** inside an `uppercase` parent used to inherit the capitals and no longer does — set `mono` where caps were intended. If you show thumbs with `onMessageFeedback`, give each reply `feedback: null` until the visitor votes — replies without `feedback` take no vote. A test that finds content inside a closed **Accordion** panel (or any `.motion-collapse`) by role must open the panel first — closed, it is hidden.
+
 ## 0.4.0
 
 **ChatDock** is the site assistant: a pinned composer that shows suggested questions on hover and opens into a chat window, instead of a separate ask page. **PromptBar** gains `start` and `end` slots. **Components/PromptBar → Pattern — marketing composer** is removed. See **ADR-0039**.

package/CONSUMING.md

@@ -259,17 +259,22 @@ import {
 
 | Component | Key props | Storybook |
 |-----------|-----------|-----------|
-| `Button` | `role` (`primary` \| `secondary` \| `ghost` \| `destructive` \| `inverse` \| `outline`), `layout` (`pill` \| `row` \| `nav`), `size`, `status`, `icon`, `endIcon`, `mono`, `count` | Components/Button/Button — copy a **Pattern** story (`row` for flat detail lines; **Pattern — secondary action** for the gallery intro — `role="secondary"`, label Start a project, no className) |
+| `Button` | `role` (`primary` \| `secondary` \| `ghost` \| `destructive` \| `inverse` \| `outline`), `layout` (`pill` \| `row` \| `nav`), `size`, `status` (with `icon` — **Pattern — copy button**), `icon`, `endIcon`, `mono`, `count`, `render`, `external` (with `render={<a href />}`) | Components/Button/Button — copy a **Pattern** story (`row` for flat detail lines; **Pattern — secondary action** for the gallery intro — `role="secondary"`, label Start a project, no className) |
 | `IconButton` | `icon`, `aria-label`, `role`, `size`, `fab`, `loading`, `title` | Components/Button/IconButton — copy a **Pattern** story |
 | `Chip` | `size`, `value`, `selected`, `onRemove`, `icon`, `count`, `readOnly` | Components/Chip — use `ChipFilterGroup` for multi-select filters |
 | `Input` | `label`, `description`, `status`, `message`, `loading`, `endBadge`, `icon`, `size` | Components/Input — pill shell; Required via `endBadge={<Badge>…</Badge>}` |
 | `Search` | `size`, `placeholder`, `onSubmit` | Components/Search — inline input + button row |
 | `PromptBar` | `value`, `onValueChange`, `onSend`, `placeholder` (default Ask anything…), `start`, `end` | Components/PromptBar — **Pattern — prompt bar**. Wide pill, inline field (one line empty, up to 3 lines, then scroll), inset **IconButton** send. Muted until there is text, then `--color-brand` (`#011272`). Enter sends. `start` takes the brand mark; `end` takes extra inset controls. Voice and attachments are not part of this version. |
-| `ChatDock` | `title`, `subtitle`, `mark`, `greeting`, `messages`, `thinking`, `suggestions`, `onSend`, `onSuggestionSelect`, `disclaimer` | Components/ChatDock — **Pattern — chat dock**. The site assistant: a pinned **PromptBar** with suggested-question pills on hover that opens into a non-modal chat window (full screen on phones). The app owns the conversation and the request. Replaces the separate ask page. |
+| `ChatDock` | `title`, `subtitle`, `mark`, `greeting`, `messages` (replies may carry `copyText`, `meta`, `feedback`), `thinking`, `suggestions`, `followUps`, `followUpsPlacement`, `onSend`, `onSuggestionSelect`, `onMessageFeedback`, `gate` (**ChatDock.Gate**), `disclaimer` | Components/ChatDock — **Pattern — chat dock**. The site assistant: a pinned **PromptBar** with suggested-question pills on hover that opens into a non-modal chat window (full screen on phones). The app owns the conversation and the request, and passes `followUps` for the latest reply when it has them (shown under the reply by default). Finished replies get Copy, thumbs, and a score row from `copyText`, `onMessageFeedback` with `feedback`, and `meta`. Start a project runs as a `gate` in the composer's place — **Pattern — start a project gate**. Replaces the separate ask page. |
 | `Card` | `variant`, `shape`, `padding` | Components/Card/Card — `Card.Header` (`start` | `end`), **`Card.Body` slot** (no default fill), `Card.Footer` |
-| `Accordion` | `variant`, `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections |
+| `Accordion` | `variant`, `flush` (plain), `Accordion.Item` `leading` / `label` / `trailing` / `open` | Components/Accordion — FAQ, settings sections; **Pattern — flush** for filter groups. Closed panels leave the tab order |
+| `Breadcrumb` | `items` (`{ label, href }`, current page last), `maxItems`, `separator` (`chevron` \| `slash`), `variant` (`sans` \| `mono`), `renderLink`, `labels` | Components/Breadcrumb — **Pattern — path**, **long path**, **router links**, **editorial** |
+| `DescriptionList` | `layout` (`inline` \| `stacked`), `rule` (`solid` \| `dotted` \| `none`), `variant` (`sans` \| `mono`), `DescriptionList.Item` `name` / `layout` | Components/DescriptionList — **Pattern — post metadata**, **Pattern — details** |
+| `SectionCaption` | `children`, `as`, `id`, `end`, `marker`, `rule` | Components/SectionCaption — **Pattern — column caption**, **Pattern — caption with an action** |
+| `Prose` | `size` (`lg` \| `md`), `measure` (`reading` \| `none`), `as` | Components/Prose — **Pattern — article body**. Full page: **Guides/Post page → Pattern — post page** |
+| `IndexList` | `captions`, `size`, `titleAs`, `empty`, `IndexList.Item` `meta` / `title` / `href` / `preview` | Components/IndexList — **Pattern — post index**. With filters: **Guides/Filter panel → Pattern — filtered index** |
 | `TaskRows` | `variant`, `status`, `meta`, `detailsLayout`, `TaskRows.Detail` | Components/TaskRows — **Pattern — status rows**, **capsules**, **action details** (`Detail variant="button"`), **tag chips** (`Chip readOnly size="sm"`), detail lines (`Detail` + `onPress` → `Button layout="row"`) |
-| `Badge` | `variant`, `size`, `emphasis`, `count`, `icon`, `avatar`, `iconOnly` | Components/Badge — copy a **Pattern** story. `avatar={{ src, alt }}` is a leading round **Avatar** sized to the badge (`badgeAvatarSize`: sm → 20px, md → 24px) and is mutually exclusive with `icon`. Pass `alt=""` when the label already speaks the word. |
+| `Badge` | `variant`, `size`, `emphasis` (`solid` \| `muted` \| `outline`), `mono`, `render` (tag links), `count`, `icon`, `avatar`, `iconOnly` | Components/Badge — copy a **Pattern** story. `avatar={{ src, alt }}` is a leading round **Avatar** sized to the badge (`badgeAvatarSize`: sm → 20px, md → 24px) and is mutually exclusive with `icon`. Pass `alt=""` when the label already speaks the word. |
 | `Status` | `variant`, `tone`, `label`, `besideLabel`, `pulsing`, `active`, `step` | Components/Status — `variant="ring"` or `variant="dot"` |
 | `FooterReveal` | `FooterReveal.Content`, `FooterReveal.Footer`, `FooterReveal.Brand` (`headline`, `ctaLabel`, `onCtaClick`, optional `ctaHref`, `wordmark`, `socialLinks`), `footerRevealFieldClasses` | Components/FooterReveal — **Pattern — marketing page** and **Pattern — marketing hero**. Cover sits on the page background; the brand field sticks underneath and sharpens from 12px of blur. Field is `bg-brand` / `text-on-brand` (`#011272`). The wordmark is `--color-brand-soft`, spans the footer width, and is cropped at the bottom edge. CTA is **Button** `role="inverse"` `type="button"` (`onCtaClick` opens the project modal). Pass `ctaHref` only to render a link. Reduced motion stays sharp, including the server render (the SSR snapshot is sharp, so a Next page does not hydrate a leftover blur). The root does not clip, so **GridOverlay** guides still cover the hero. The marketing hero's guide `grid-page` uses `!py-0` so the expanded gallery tile meets the footer with no page-background strip. |
 | `HeroIntro` | `lead`, `children`, `step` (`large` default \| `display`), `className` (layout only) | Components/HeroIntro — **Pattern — two-line intro**. Also composed by **Components/HeroTileStack → Pattern — marketing hero**. `lead` is the first sentence. Children always start on the next line. Both steps are `type-display-2` at normal weight (`!font-normal`) and `text-balance`, the same font-size as **ScrollHorizontal.Intro**. Keep “Austin, Texas” together with a non-breaking space. `lead` wraps, including from `md`. `large` (default) is columns 4–9 from `lg`. `display` is full width of the page grid — **Pattern — marketing hero text sequence** and **FooterReveal → Pattern — marketing hero with sequenced gallery**. The shell is `grid-page` with the page block pad removed. Do not insert a line break in the copy. |

package/dist/collapse.css

@@ -1,20 +1,28 @@
 /** Shared height-collapse motion — List panels, Table filter rows. */
 .motion-collapse {
   display: grid;
+  /*
+   * visibility interpolates as "visible" for the whole transition, so a closing panel stays drawn
+   * while it folds and turns hidden once the fold ends; an opening panel is visible at once. Hidden,
+   * its controls leave the tab order and the accessibility tree.
+   */
   transition:
     grid-template-rows var(--duration-medium) var(--ease-standard),
-    opacity var(--duration-medium) var(--ease-standard);
+    opacity var(--duration-medium) var(--ease-standard),
+    visibility var(--duration-medium) var(--ease-standard);
 }
 
 .motion-collapse[data-visible="true"] {
   grid-template-rows: 1fr;
   opacity: 1;
+  visibility: visible;
 }
 
 .motion-collapse[data-visible="false"] {
   grid-template-rows: 0fr;
   opacity: 0;
   pointer-events: none;
+  visibility: hidden;
 }
 
 @media (prefers-reduced-motion: reduce) {

package/dist/colors.css

@@ -96,6 +96,11 @@
   --color-on-brand: #ffffff;
   --color-brand-outline: var(--color-brand);
   --color-brand-soft: color-mix(in srgb, var(--color-on-brand) 40%, var(--color-brand));
+  /*
+   * Brand tint — the visitor's turns in ChatDock. 10% navy over the surface (about #e3e5ee):
+   * reads as brand, not as a neutral well, and dark text keeps full contrast (about 14:1).
+   */
+  --color-brand-tint: color-mix(in srgb, var(--color-brand) 10%, transparent);
 
   /* Derived from --color-primary — 62% clears WCAG 3:1 on white and #f8f8f8 */
   --color-focus-ring: color-mix(in srgb, var(--color-primary) 62%, transparent);
@@ -205,6 +210,8 @@
   --color-on-brand: #ffffff;
   --color-brand-outline: color-mix(in srgb, var(--color-brand) 45%, white);
   --color-brand-soft: color-mix(in srgb, var(--color-on-brand) 40%, var(--color-brand));
+  /* The navy disappears on dark surfaces, so the tint lifts it: 28% of the outline mix (about #3d3f49 on #1b1b1b). */
+  --color-brand-tint: color-mix(in srgb, var(--color-brand-outline) 28%, transparent);
 
   /*
    * Derived from --color-primary: lift the brand toward white so the ring stays

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

@@ -21,8 +21,19 @@ export interface BadgeProps {
     /** Semantic color — solid or muted fills. Default: `neutral`. */
     variant?: BadgeVariant;
     size?: BadgeSize;
-    /** `solid` (default) or `muted` soft fills for trailing status copy. */
+    /**
+     * `solid` (default), `muted` soft fills for trailing status copy, or `outline` — a hairline and a
+     * transparent fill, for author and category tags.
+     */
     emphasis?: BadgeEmphasis;
+    /** Mono uppercase label — the same face and tracking as **Button** `mono`. Label patterns only. */
+    mono?: boolean;
+    /**
+     * Compose the badge onto another element (Base UI `render`) — `render={<a href="/blog?topic=guides" />}`
+     * makes a tag a link, with a hover underline, the focus ring, and a 44px-tall hit area. Label,
+     * icon, and avatar patterns only.
+     */
+    render?: ReactElement;
     /** Compact numeric pill — notifications, unread totals. Not combinable with `icon`. */
     count?: number;
     /** Leading Lucide icon — label pattern, or required for `iconOnly`. Not with `avatar`. */
@@ -40,8 +51,9 @@ export interface BadgeProps {
     className?: BadgeLayoutClassName;
 }
 /**
- * Short status, count, or category label — solid semantic fills.
- * Pattern-first: label, count, icon + label, avatar + label, icon-only, muted emphasis.
+ * Short status, count, or category label — solid, muted, or outline semantic fills.
+ * Pattern-first: label, count, icon + label, avatar + label, icon-only, muted and outline emphasis,
+ * mono caps, and links (`render`).
  */
-export declare function Badge({ children, variant, size, emphasis, count, icon, avatar, iconOnly, id, className, }: BadgeProps): import("react").JSX.Element;
+export declare function Badge({ children, variant, size, emphasis, mono, render, count, icon, avatar, iconOnly, id, className, }: BadgeProps): import("react").JSX.Element;
 //# sourceMappingURL=Badge.d.ts.map

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

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

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

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

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

@@ -2,10 +2,10 @@ import type { SemanticVariant } from "../../../lib/semanticVariants";
 export declare const badgeVariants: readonly ["neutral", "info", "success", "warning", "destructive"];
 export type BadgeVariant = (typeof badgeVariants)[number];
 export type BadgeSize = "sm" | "md";
-export declare const badgeEmphases: readonly ["solid", "muted"];
+export declare const badgeEmphases: readonly ["solid", "muted", "outline"];
 export type BadgeEmphasis = (typeof badgeEmphases)[number];
 /** Shared shell — Astryx-style compact pill labels. */
-export declare const badgeBaseClasses = "inline-flex shrink-0 items-center justify-center font-sans font-medium tracking-normal";
+export declare const badgeBaseClasses = "inline-flex shrink-0 items-center justify-center font-sans font-medium normal-case tracking-normal";
 /**
  * Solid semantic fills — matches [Astryx Badge](https://astryx.atmeta.com/components/Badge) status row.
  * Neutral stays subtle (category / draft tags).
@@ -13,7 +13,17 @@ export declare const badgeBaseClasses = "inline-flex shrink-0 items-center justi
 export declare const badgeSolidClasses: Record<BadgeVariant, string>;
 /** Soft semantic fills — task row trailing pills, subtle status copy. */
 export declare const badgeMutedClasses: Record<BadgeVariant, string>;
+/** Hairline outline, transparent fill — author and category tags. */
+export declare const badgeOutlineClasses: Record<BadgeVariant, string>;
 export declare function badgeSurfaceClasses(variant: BadgeVariant, emphasis: BadgeEmphasis): string;
+/** Mono uppercase label — the same face, size, and tracking as **Button** `mono`. `!` beats the sans medium shell. */
+export declare const badgeMonoClasses = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]";
+/**
+ * A badge composed onto a link (`render`): an underline on hover, the hairline darkens on an
+ * outline badge, the focus ring, and a 44px-tall hit area around the 20–24px pill.
+ */
+export declare const badgeInteractiveClasses: string;
+export declare const badgeInteractiveOutlineClasses = "hover:border-fg";
 /** Label sizing — text-only and icon patterns share the same padding shell. */
 export declare const badgeLabelSizeClasses: Record<BadgeSize, string>;
 /** Gap between leading icon and label — only when `icon` is set. */

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

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

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

@@ -1,46 +1,57 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
+import { motionTransition as t } from "../../../lib/motion.js";
 //#region src/components/atoms/Badge/badgeStyles.ts
-var t = [
+var n = [
 	"neutral",
 	"info",
 	"success",
 	"warning",
 	"destructive"
-], n = ["solid", "muted"], r = "inline-flex shrink-0 items-center justify-center font-sans font-medium tracking-normal", i = {
+], r = [
+	"solid",
+	"muted",
+	"outline"
+], i = "inline-flex shrink-0 items-center justify-center font-sans font-medium normal-case tracking-normal", a = {
 	neutral: "border border-border bg-secondary text-secondary-foreground shadow-raised",
 	info: "bg-info text-on-info",
 	success: "bg-success text-on-success",
 	warning: "bg-warning text-on-warning",
 	destructive: "bg-error text-on-error"
-}, a = {
+}, o = {
 	neutral: "border border-border bg-secondary text-secondary-foreground",
 	info: "bg-info-muted text-info",
 	success: "bg-success-muted text-success",
 	warning: "bg-warning-muted text-warning",
 	destructive: "bg-error-muted text-error"
+}, s = {
+	neutral: "border border-border-emphasized bg-transparent text-fg",
+	info: "border border-info bg-transparent text-info",
+	success: "border border-success bg-transparent text-success",
+	warning: "border border-warning bg-transparent text-warning",
+	destructive: "border border-error bg-transparent text-error"
 };
-function o(e, t) {
-	return t === "muted" ? a[e] : i[e];
+function c(e, t) {
+	return t === "outline" ? s[e] : t === "muted" ? o[e] : a[e];
 }
-var s = {
+var l = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]", u = e("relative cursor-pointer decoration-1 underline-offset-2 hover:underline", "after:absolute after:inset-x-0 after:top-1/2 after:h-11 after:-translate-y-1/2 after:content-['']", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body", "transition-[border-color,text-decoration-color]", t("fast")), d = "hover:border-fg", f = {
 	sm: "h-5 rounded-full px-2 text-xs leading-none",
 	md: "h-6 rounded-full px-2.5 text-sm leading-none"
-}, c = {
+}, p = {
 	sm: "gap-1",
 	md: "gap-1.5"
-}, l = {
+}, m = {
 	sm: "h-5 gap-1 rounded-full py-0 pl-0 pr-2 text-xs leading-none",
 	md: "h-6 gap-1.5 rounded-full py-0 pl-0 pr-2.5 text-sm leading-none"
-}, u = {
+}, h = {
 	sm: "size-3 shrink-0 stroke-current",
 	md: "size-3.5 shrink-0 stroke-current"
-}, d = {
+}, g = {
 	sm: "min-h-[1.125rem] min-w-[1.125rem] rounded-full px-1 text-xs leading-none tabular-nums",
 	md: "min-h-[1.25rem] min-w-[1.25rem] rounded-full px-1 text-sm leading-none tabular-nums"
-}, f = "size-[1.375rem] rounded-full p-0", p = "border border-transparent bg-surface text-fg shadow-raised";
-function m(t) {
+}, _ = "size-[1.375rem] rounded-full p-0", v = "border border-transparent bg-surface text-fg shadow-raised";
+function y(t) {
 	return e("rounded px-[length:var(--spacing-1)] text-[10.5px] leading-none tabular-nums text-muted", t && "bg-secondary");
 }
 //#endregion
-export { l as badgeAvatarLabelSizeClasses, r as badgeBaseClasses, d as badgeCountSizeClasses, n as badgeEmphases, c as badgeIconGapClasses, f as badgeIconOnlySizeClasses, u as badgeIconSizeClasses, s as badgeLabelSizeClasses, a as badgeMutedClasses, p as badgeOnButtonCountClasses, m as badgeSegmentCountClasses, i as badgeSolidClasses, o as badgeSurfaceClasses, t as badgeVariants };
+export { m as badgeAvatarLabelSizeClasses, i as badgeBaseClasses, g as badgeCountSizeClasses, r as badgeEmphases, p as badgeIconGapClasses, _ as badgeIconOnlySizeClasses, h as badgeIconSizeClasses, u as badgeInteractiveClasses, d as badgeInteractiveOutlineClasses, f as badgeLabelSizeClasses, l as badgeMonoClasses, o as badgeMutedClasses, v as badgeOnButtonCountClasses, s as badgeOutlineClasses, y as badgeSegmentCountClasses, a as badgeSolidClasses, c as badgeSurfaceClasses, n as badgeVariants };

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

@@ -4,7 +4,7 @@ import { type ButtonAlign, type ButtonEmphasis, type ButtonLayout, type ButtonRo
 export type { ButtonAlign, ButtonEmphasis, ButtonLayout, ButtonRole, ButtonSize, ButtonWidth } from "./buttonStyles";
 export { buttonAligns, buttonEmphases, buttonLayouts, buttonRoles, buttonWidths } from "./buttonStyles";
 export type { ButtonStatus } from "./buttonStatusStyles";
-export { defaultStatusLabels, getNextButtonStatus } from "./buttonStatusStyles";
+export { buttonStatusHoldMs, defaultStatusLabels, getNextButtonStatus } from "./buttonStatusStyles";
 /** Layout-only — not for colors, borders, or typography overrides. */
 export type ButtonLayoutClassName = string;
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "role" | "size"> {
@@ -35,13 +35,14 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
     /**
      * Async / submit morph — whole pill animates idle → loading → success → error.
      * [Motion multi-state badge](https://motion.dev/examples/react-multi-state-badge).
-     * Mutually exclusive with `icon` and `count`.
+     * With `icon`, the status glyphs morph out of the icon (a copy button's Copy glyph turns into the
+     * check). Mutually exclusive with `count`, `endIcon`, `mono`, and `render`.
      */
     status?: ButtonStatus;
     statusLabels?: Partial<Record<ButtonStatus, string>>;
     /** When true, error state is non-interactive. Default: clickable for retry. */
     disableOnError?: boolean;
-    /** Leading Lucide icon — `import { … } from "lucide-react"`. Not combinable with `status`. */
+    /** Leading Lucide icon — `import { … } from "lucide-react"`. With `status`, it morphs into the status glyph. */
     icon?: ReactElement;
     /** Trailing numeric count (inbox / notifications). Not combinable with `status`. */
     count?: number;
@@ -63,6 +64,13 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      * `disabled` maps to `aria-disabled` on non-button elements.
      */
     render?: ReactElement;
+    /**
+     * With `render={<a href />}` to another site: opens it in a new tab (`target="_blank"`, a safe
+     * `rel`), tells screen readers so, and shows the trailing external icon **TextLink** uses.
+     */
+    external?: boolean;
+    /** `external` only — `false` drops the trailing icon; the spoken "opens in a new tab" stays. */
+    externalIcon?: boolean;
     /** Layout-only: width, margin, flex placement. */
     className?: ButtonLayoutClassName;
     onClick?: React.MouseEventHandler<HTMLButtonElement>;

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

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAcL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACxG,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEhF,sEAAsE;AACtE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C;IACD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,kIAAkI;IAClI,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oFAAoF;IACpF,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,8FAA8F;IAC9F,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,kDAAkD;IAClD,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAyED,eAAO,MAAM,MAAM,2GA4JjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAKf,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAeL,KAAK,WAAW,EAChB,KAAK,cAAc,EACnB,KAAK,YAAY,EACjB,KAAK,UAAU,EACf,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,gBAAgB,CAAC;AAExB,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AACrH,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACxG,YAAY,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACzD,OAAO,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAEpG,sEAAsE;AACtE,MAAM,MAAM,qBAAqB,GAAG,MAAM,CAAC;AAE3C,MAAM,WAAW,WACf,SAAQ,IAAI,CACV,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,WAAW,GAAG,MAAM,GAAG,MAAM,CAC3C;IACD,oBAAoB;IACpB,QAAQ,EAAE,SAAS,CAAC;IACpB,kIAAkI;IAClI,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,oFAAoF;IACpF,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,YAAY,EAAE,MAAM,CAAC,CAAC,CAAC;IACrD,+EAA+E;IAC/E,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gHAAgH;IAChH,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,oFAAoF;IACpF,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gGAAgG;IAChG,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,kDAAkD;IAClD,SAAS,CAAC,EAAE,qBAAqB,CAAC;IAClC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,iBAAiB,CAAC,CAAC;IACrD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAwFD,eAAO,MAAM,MAAM,2GAyKjB,CAAC"}