@thewhatmatters/wmds 0.4.29 → 0.4.31

package/CHANGELOG.md

@@ -7,6 +7,71 @@ 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.31
+
+**SiteNav's phone menu follows the Header rule: a "Menu" button that becomes "Close", a full-height panel under the bar, and a link tap closes it.**
+
+- **HeroIntro** `actions` (new): the CTA row under the heading and description, one primary and an optional secondary (Hero rule R2); left on phones, centred from `md`. New story **Pattern — with description and actions**. Story copy is shorter, so the intro holds 3 lines at 390: "A design studio in Austin. / We help brands stand out online." (**HeroIntro**, **HeroTileStack**, **FooterReveal** stories).
+- **SiteNav** `mobile` menu (below `md`), rebuilt to Header and mobile menu rules N5–N8:
+  - The trigger is a **Button** with an icon and a visible word, "☰ Menu", that becomes "✕ Close" in the same place (QA #28). The word is the accessible name (was an icon-only button named "Open menu" / "Close menu"). At least 44px tall.
+  - The menu opens as a full-height panel **under the bar**, not a side **Sheet**. The bar stays live, so Close sits where Menu was. The panel is a dialog: focus moves to its first link, Tab cycles through the bar and the panel, the page behind is inert and doesn't scroll, Escape or Close closes it, and focus returns to Menu. It closes when the window widens past `md`.
+  - **Tapping any link in the menu closes it** (QA #25; it used to stay open over the page).
+  - **SiteNav.MobileLink** rows are 56px and full width. The current page is marked by weight and the selected fill plus `aria-current="page"`, not colour alone.
+  - `mobileAction` (new): the main action, pinned to the bottom of the open menu.
+  - With `mobile`, the bar's `end` actions give way when brand + actions + Menu don't fit (measured, not a fixed width), so Menu keeps its word; `mobileAction` carries the main button there. Below `md` the actions and Menu sit at the trailing edge.
+  - `mobileTitle` is now a string (the dialog's accessible name).
+  - New interaction tests **Internal/Interactions/SiteNav → phone menu…** (390), **phone menu at 320** (N7) and **phone bar: trailing edge**.
+- **SiteNav** full bar: a wordmark **SiteNav.Brand** and the Menu button pull their own 16px padding past the edges, so the wordmark and the Menu word line up with the content edges (hit areas unchanged; the compact pill keeps its padding). The bar's give-way check measures the slots' margin boxes instead of `scrollWidth`, so that pull doesn't hide a CTA that fits: "Get my free sketch" stays in the bar from 390 (N9). The Menu/Close button is quiet in both states (ghost hover and press fill only). While the phone menu is open, the bar's actions hide, so the menu's own action is the one CTA on screen. New interaction test **phone bar: wordmark and Menu word sit on the content edges**.
+- **Breakpoints rule P5:** every `sm:` (640px) variant in WMDS moves to `md:` (768px): **Field** label column, **TileGrid** `--tile-grid-cols-sm` (now from `md`), **Breadcrumb** gap and label width, **FooterReveal** wordmark size, **Carousel** `--carousel-item-sm` and caption width, the Post page / Resource detail / Filter panel / Profile typography guides, and story Show code. Layout changes only between 640 and 767px, where these now keep their phone layout. New unit test: no `sm:` and no one-off `min-[…]` / `max-[…]` breakpoints anywhere in `src`.
+- `lib/dialogOverlay` exports `tabbablesIn` and `inertAllBut` (internal helpers, also used by SiteNav).
+- **ChatDock**: its 40rem chat column is documented as the text-only exception to Container width W5.
+
+### Consumer actions
+
+If you pass `mobile` to **SiteNav**, also pass `mobileAction` (usually the same **Button** as your bar CTA) so small phones still reach it when the bar is too tight for it. Keep the bar's CTA label short (about 12 characters) so it fits beside Menu at 390. Tests that find the trigger by `aria-label="Open menu"` now find it by its text, `getByRole("button", { name: "Menu" })`, and the open menu is a `dialog` named by `mobileTitle` (default "Menu"). `mobileTitle` must be a string. Re-copy any **Pattern** whose Show code used `sm:` (the generated `docs/patterns` show which changed). `--tile-grid-cols-sm` and `--carousel-item-sm` keep their names but now apply from 768px.
+
+## 0.4.30
+
+**Capitals are tracked 0.08–0.12em (Eyebrow rule E3).**
+
+- **HeroIntro** is left-aligned on phones, where it runs 3+ lines, and centred from `md` (Headings H8). The default step's heading now spans columns 2–11 from `lg` (was 4–9), so a 12-word intro holds 2 lines; `description` keeps the 6-column measure (4–9). Story copy is 12 words or fewer ("A design studio in Austin, Texas. / We help brands stand out online.") across **HeroIntro**, **HeroTileStack** and **FooterReveal** stories.
+- **`type-lead`, `type-large`, `type-body` and `type-reading`** set `text-wrap: pretty`, so a lone word doesn't end a paragraph.
+- **HeroIntro** `lead` is renamed **`firstLine`** (it's the heading's first line, not a lead paragraph). `lead` still works as a deprecated alias and warns in development. New optional **`description`**: a lead paragraph under the heading, `type-lead` in ink (Lead rules L7, L8). Story Show code updated: **Components/HeroIntro**, **Components/FooterReveal** and **Components/HeroTileStack** marketing hero patterns.
+- **Accordion** `size` (new): `ui` (default, 14px muted panel text) or `reading` (17px regular in ink) for FAQ answers and service descriptions (Body rules B7, B9). New unit test.
+- **IntakeConfirmation** body is `type-large` (regular), not `type-heading-2`: it's a paragraph (B4).
+- **Guides/PostPage** lead sits in ink (was muted) and is shorter, about 2 lines at 390 (B9, L8).
+- **Foundations/Typography** docs: `type-body` 14px is for app UI; marketing paragraphs use `type-large` or `type-reading` (B7); `type-reading` 1.65 is the long-form exception (B1).
+- **`type-large` is regular weight (was semibold; Body rule B4, Randy 2026-10-26: "regular or lighter when it's 1.5rem and below").** `--text-large-weight` is a documented knob for a face that needs more weight.
+- **`type-eyebrow`** tracking is **0.08em** (was 0.05em): `--text-eyebrow-tracking`. Affects **SectionCaption**, **IndexList** captions, **DescriptionList** `variant="mono"`, **FilterPanel** titles and anything on `typographyClass("eyebrow")`.
+- **`typographyClass("overline")`** tracks 0.08em (was `tracking-wider`, 0.05em).
+- **Badge** `mono` and **Button** `mono` track 0.12em (was 0.14em).
+- Story Show code updated: **Components/FooterReveal → Marketing page pattern** (its column labels).
+- New unit test: every uppercase class string in WMDS tracks 0.08–0.12em.
+- **SectionCaption** `as` defaults to **`p`** (was `h2`): a caption in capitals is an eyebrow, not a heading (Headings H6, Eyebrow E6). It still names a region through `id` + `aria-labelledby`. **FilterPanel**'s "/ Filters" title and the post page's "/ Metadata" follow.
+- **PageHeader** `as` (new): `h1` / `h2` / `h3`, so the title's level follows the page outline (Headings H1). Defaults are unchanged (`app` → `h1`, `page` → `h2`).
+- New interaction test **Internal/Interactions/Heading levels**.
+- **Every display step** (`type-display-hero`, `-xl`, `-1`, `-2`, `-3`) sets `overflow-wrap: anywhere` (Display rule D5, WCAG 1.4.10): a long word breaks instead of widening its flex or grid track and scrolling a 320px page sideways. `type-display-hero` and `-xl` used `break-word`, which still overflowed inside flex and grid. Normal copy sets as before. New interaction test **Internal/Interactions/Display type**.
+- **`type-lead`** (new, `typographyClass("lead")`): the one paragraph under a page's H1 that sums the page up (Lead paragraph rule L7). 18px on phones to 21px (`--text-lead-size`, about 1.25× the 17px reading body), regular weight, 1.45 leading; use it at the 42rem measure in `text-fg`. Nothing uses it yet, so nothing changes until you adopt it.
+- **Button** and **IconButton** `disabled` stays in the tab order (Buttons rule U6): it sets `aria-disabled` instead of native `disabled`, ignores clicks, Enter and Space (a disabled submit button no longer submits its form, including on Enter in a field), and shows no hover or press feedback. Disabled dims to **70%** (was 50%), so every role's label keeps 3:1 against its fill in light and dark (unit test). **Button** `disabledReason` (new) shows why beside the button (`type-supporting`, muted) and is read with it through `aria-describedby`. `pressScaleClass` skips `aria-disabled`. Story **Components/Button/Button → Reference — disabled**; new interaction test **Internal/Interactions/Button disabled**.
+- **Band** `spacing="lg"` is **64px on phones** and 96px from `md` (was 96px everywhere; Spacing rule S8). `md` stays 48px. A hero or closing band on a phone loses 32px above and below.
+- **Button**, **LinkTile** and **SiteNav** menu links follow the same rule: `external` keeps the same tab (with the external icon on Button and LinkTile), and new **`newTab`** opts in to a new tab and the spoken hint. **PostPage** share links and **ResourceDetail** "Visit" now stay in the tab. **Minor behaviour change.**
+- **TextLink** `external` opens in the **same tab** (was a new tab; Links K9). It still shows the external icon. New **`newTab`** opt-in sets `target="_blank"`, `rel="noopener noreferrer"` and adds "(opens in a new tab)" to the accessible name. **Minor behaviour change.**
+- **FooterReveal** social links open in the same tab (were a new tab for `https`; K9) and are at least 24px wide (K6). `FooterRevealSocialLink` gains an optional **`ariaLabel`**. **FooterRevealRuled**'s email link no longer opens a new tab. Story hrefs are real-looking, and the X link is named "WhatMatters on X".
+- **IconButton** docs: don't disable icon buttons (U6). Hide the action, or keep it enabled and explain on press. No reason slot was added.
+- **Button** `role` docs: on a page background the secondary level is `outline` (U1/U4). The filled `secondary` pill doesn't reach 3:1 against the page (logged as a gap; no visual change in this release).
+- **SiteNav** docs record the **K7 navigation exception**: nav links have no underline; hover shows the ghost pill and darker ink, and the focus ring stays.
+- **Breadcrumb** link crumbs are 24px tall targets (were 20px; Links rule K6, WCAG 2.5.8). Padding plus an equal negative margin, so the row does not move; the focus ring is 2px taller. New interaction test **Internal/Interactions/Link targets**.
+- **Display type (Rule 3, D1/D2):** `type-display-1` leading **1.05** (was 1.15) and tracking **−0.03em** (was −0.04em); `type-display-2` **1.1** (was 1.2), new `--text-display-2-tracking` **−0.02em**; `type-display-3` **1.15** (was 1.24), new `--text-display-3-tracking` **−0.01em**; `type-display-hero` tracking **−0.03em** (was −0.04em). `--font-display-tracking` still overrides every step for a caps face. New unit test.
+- **FooterReveal** headline is `type-heading-1` (was `type-display-1`): the fitted wordmark is the footer's one display moment (D9). The wordmark stays hidden from screen readers and is exempt from D1/D2 as a logo graphic.
+- **Foundations/Typography** docs: heading steps sit two apart on the 1.2× ramp (≥ 1.25× between levels, Headings H7); an eyebrow and its heading are one spacing unit (H4, E5). The ramp is unchanged.
+- **FooterReveal** sample headline is sentence case, "We build WhatMatters" (was Title Case; Headings H6). Show code changed in **Components/FooterReveal → Marketing page pattern**, **Marketing hero pattern**, **Marketing hero with gallery intro** and **Sequenced marketing hero**.
+
+### Consumer actions
+
+Re-copy the four **Components/FooterReveal** patterns named above if you pasted them (and write your own headline in sentence case). In your own code, give uppercase text `tracking-[0.08em]` (or use `type-eyebrow`) instead of `tracking-wider`. Labels are slightly wider; check eyebrows and mono badges at 390. A **SectionCaption** that should stay in the heading outline needs `as="h2"`; a test that finds it with `getByRole("heading")` now needs `getByText`. If your app sets subtext in `type-large` and wants the old weight, set `--text-large-weight: 600`. **HeroIntro:** rename `lead=` to `firstLine=` (re-copy the FooterReveal and HeroTileStack hero patterns); `lead` keeps working until a later release. **Disabled buttons are now focusable** (`aria-disabled`): a test that used `toBeDisabled()` on a WMDS Button or IconButton needs `toHaveAttribute("aria-disabled", "true")`, and code that read `button.disabled` reads `aria-disabled`. Prefer an enabled button plus an error on submit; when you keep one disabled, pass `disabledReason`.
+
+If a **TextLink**, **Button**, **LinkTile** or **SiteNav** menu link with `external` must keep opening a new tab, add `newTab`. Give a one-letter FooterReveal social label an `ariaLabel`.
+
 ## 0.4.29
 
 **SiteNav's phone menu button says what it does.**

package/CONSUMING.md

@@ -342,6 +342,7 @@ A client's brand on WMDS is a short `brand.css` (imported after `styles.css`, un
 | Knob | Default | Reads it |
 |------|---------|----------|
 | `--font-family-heading` | Geist | `type-heading-*`, and every display step when `--font-display` is unset |
+| `--text-large-weight` | `400` (regular) | `type-large` subtext. Body and subtext at 1.5rem and below stay regular or lighter; raise it only for a face that reads too thin |
 | `--font-display` | unset (the heading face) | every `type-display-*` step (`hero`, `xl`, `1`, `2`, `3`) |
 | `--font-display-weight` | each step's own (700 / 600) | display steps: set `400` for a one-weight face, so nothing is faux-bolded |
 | `--font-display-tracking` | each step's own | display steps: `0` for a condensed face |
@@ -355,7 +356,7 @@ A client's brand on WMDS is a short `brand.css` (imported after `styles.css`, un
 
 The font knobs also work on a section wrapper (`[--font-display:…]`); set the colour pairs on `:root` (and `[data-theme="dark"]` if they differ there). Load the face yourself (`next/font` or `@fontsource/*`).
 
-**Display steps:** `type-display-hero` (fluid to 16vw, 0.92 leading) and `type-display-xl` (44px → 136px, 0.9 leading) sit above `type-display-1`; both break long words rather than overflow a phone. **TextSequence** word masks keep 0.08em headroom above and to the sides, so tall caps and outline strokes aren't clipped.
+**Display steps:** `type-display-hero` (fluid to 16vw, 0.92 leading) and `type-display-xl` (44px → 136px, 0.9 leading) sit above `type-display-1`; every display step breaks a long word rather than overflow a phone (`overflow-wrap: anywhere`, also inside flex and grid). **TextSequence** word masks keep 0.08em headroom above and to the sides, so tall caps and outline strokes aren't clipped.
 
 **Contrast:** every on-colour and muted step needs **4.5:1** on its colour. `npx wmds-check` reads the app's CSS and fails a hex pair under that (`brand-contrast`, an error). Pairs it can't resolve (a `var()` or `color-mix`) aren't checked, so check those yourself.
 

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

@@ -58,7 +58,7 @@ function T({ children: a, variant: h = "neutral", size: _ = "sm", emphasis: x =
 	}) : /* @__PURE__ */ b(w, {
 		render: E,
 		id: N,
-		className: e(r, V, R ? p[_] : L ? n[_] : l[_], !R && z && o[_], T && "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]", E != null && c, E != null && x === "outline" && "hover:border-fg", P),
+		className: e(r, V, R ? p[_] : L ? n[_] : l[_], !R && z && o[_], T && "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.12em]", E != null && c, E != null && x === "outline" && "hover:border-fg", P),
 		"data-variant": h,
 		"data-size": _,
 		"data-emphasis": R ? "muted" : x,

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

@@ -32,7 +32,7 @@ export declare const badgeMutedClasses: Record<BadgeVariant, string>;
 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]";
+export declare const badgeMonoClasses = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.12em]";
 /**
  * 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.

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

@@ -56,7 +56,7 @@ var r = [
 function h(e, t) {
 	return t === "outline" ? m[e] : t === "muted" ? p[e] : f[e];
 }
-var g = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.14em]", _ = 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]", n("fast")), v = "hover:border-fg", y = {
+var g = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !tracking-[0.12em]", _ = 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]", n("fast")), v = "hover:border-fg", y = {
 	sm: "h-5 rounded-[var(--radius-control)] px-2 text-xs leading-none",
 	md: "h-6 rounded-[var(--radius-control)] px-2.5 text-sm leading-none"
 }, b = {

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

@@ -8,7 +8,7 @@ export interface BandProps {
     children: ReactNode;
     /** `default` keeps the page's colours; `inverse` (brand surface) and `field` re-skin everything inside. */
     tone?: BandTone;
-    /** Space above and below the content: `md` (default) 48px, `lg` 96px, `none`. */
+    /** Space above and below the content: `md` (default) 48px, `lg` 64px on phones → 96px from `md`, `none`. */
     spacing?: BandSpacing;
     /** The band element. Default: `section`. */
     as?: BandElement;

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

@@ -1 +1 @@
-{"version":3,"file":"Band.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Band/Band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,GACd,MAAM,cAAc,CAAC;AAEtB,iEAAiE;AACjE,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,uGAAuG;IACvG,QAAQ,EAAE,SAAS,CAAC;IACpB,2GAA2G;IAC3G,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,iFAAiF;IACjF,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4CAA4C;IAC5C,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAgB,EAChB,OAAc,EACd,EAAE,EAAE,OAAmB,EACvB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,GACV,EAAE,SAAS,+BAeX"}
+{"version":3,"file":"Band.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Band/Band.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,EACd,MAAM,cAAc,CAAC;AAEtB,OAAO,EACL,YAAY,EACZ,YAAY,EACZ,SAAS,EACT,KAAK,WAAW,EAChB,KAAK,WAAW,EAChB,KAAK,QAAQ,GACd,MAAM,cAAc,CAAC;AAEtB,iEAAiE;AACjE,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC;AAEzC,MAAM,WAAW,SAAS;IACxB,uGAAuG;IACvG,QAAQ,EAAE,SAAS,CAAC;IACpB,2GAA2G;IAC3G,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,4GAA4G;IAC5G,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,4CAA4C;IAC5C,EAAE,CAAC,EAAE,WAAW,CAAC;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,YAAY,CAAC,EAAE,cAAc,CAAC,YAAY,CAAC,CAAC;IAC5C,iBAAiB,CAAC,EAAE,cAAc,CAAC,iBAAiB,CAAC,CAAC;IACtD,SAAS,CAAC,EAAE,mBAAmB,CAAC;CACjC;AAED;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,EACnB,QAAQ,EACR,IAAgB,EAChB,OAAc,EACd,EAAE,EAAE,OAAmB,EACvB,EAAE,EACF,YAAY,EAAE,SAAS,EACvB,iBAAiB,EAAE,cAAc,EACjC,SAAS,GACV,EAAE,SAAS,+BAeX"}

package/dist/components/atoms/Band/bandStyles.d.ts

@@ -5,7 +5,10 @@ export declare const bandTones: readonly ["default", "inverse", "field"];
  */
 export type BandTone = (typeof bandTones)[number];
 export declare const bandSpacings: readonly ["md", "lg", "none"];
-/** Space above and below the content: `md` (default) 48px, `lg` 96px, `none` 0. */
+/**
+ * Space above and below the content (Spacing rule S8): `md` (default) 48px at every width, `lg` 64px on
+ * phones and 96px from `md` (the hero and the closing section), `none` 0.
+ */
 export type BandSpacing = (typeof bandSpacings)[number];
 export declare const bandElements: readonly ["section", "div", "header", "footer", "aside"];
 export type BandElement = (typeof bandElements)[number];

package/dist/components/atoms/Band/bandStyles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bandStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Band/bandStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,0CAA2C,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,YAAY,+BAAgC,CAAC;AAE1D,mFAAmF;AACnF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,YAAY,0DAA2D,CAAC;AAErF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,WAAW,6CAA6C,CAAC;AAEtE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAI1D,CAAC"}
+{"version":3,"file":"bandStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Band/bandStyles.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,SAAS,0CAA2C,CAAC;AAElE;;;GAGG;AACH,MAAM,MAAM,QAAQ,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAElD,eAAO,MAAM,YAAY,+BAAgC,CAAC;AAE1D;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,eAAO,MAAM,YAAY,0DAA2D,CAAC;AAErF,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD;;;GAGG;AACH,eAAO,MAAM,WAAW,6CAA6C,CAAC;AAEtE,mFAAmF;AACnF,eAAO,MAAM,eAAe,oBAAoB,CAAC;AAEjD,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAI1D,CAAC"}

package/dist/components/atoms/Band/bandStyles.js

@@ -16,7 +16,7 @@ var e = [
 	"aside"
 ], r = "relative col-[1/-1] block w-full min-w-0", i = "grid-page !py-0", a = {
 	md: "py-[calc(var(--leading-base)*2)]",
-	lg: "py-[calc(var(--leading-base)*4)]",
+	lg: "py-[calc(var(--grid-baseline)*8)] md:py-[calc(var(--leading-base)*4)]",
 	none: ""
 };
 //#endregion

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

@@ -10,7 +10,11 @@ export type ButtonLayoutClassName = string;
 export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children" | "className" | "role" | "size"> {
     /** Button label. */
     children: ReactNode;
-    /** Action role — primary, secondary, ghost, destructive, inverse, outline, or inverse-outline (on-brand hairline). Default: `primary`. */
+    /**
+     * Action role — primary, secondary, ghost, destructive, inverse, outline, or inverse-outline (on-brand hairline). Default: `primary`.
+     * On a page background the secondary level is `outline` (a 3:1 edge, Buttons U1/U4); the filled `secondary` pill
+     * sits near 1:1 against the page.
+     */
     role?: ButtonRole;
     /** `pill` (default) or `row` — flat full-width lines for detail / settings rows. */
     layout?: ButtonLayout;
@@ -30,7 +34,16 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      */
     emphasis?: ButtonEmphasis;
     size?: ButtonSize;
+    /**
+     * Disabled (Buttons rule U6): stays in the tab order (`aria-disabled`), ignores presses, dims to 70%
+     * with no hover or press feedback. Prefer an enabled button that explains the error on submit.
+     */
     disabled?: boolean;
+    /**
+     * Why it's disabled, shown beside the button (`type-supporting`, muted) and read with it
+     * (`aria-describedby`). Renders only while `disabled`. Pill, row and nav layouts.
+     */
+    disabledReason?: ReactNode;
     type?: "button" | "submit" | "reset";
     /**
      * Async / submit morph — whole pill animates idle → loading → success → error.
@@ -65,11 +78,16 @@ export interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement
      */
     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.
+     * With `render={<a href />}` to another site: shows the trailing external icon **TextLink** uses and
+     * opens in the same tab (Links K9). Add `newTab` to open a new tab.
      */
     external?: boolean;
-    /** `external` only — `false` drops the trailing icon; the spoken "opens in a new tab" stays. */
+    /**
+     * `external` only — opt in to a new tab (`target="_blank"`, a safe `rel`); adds "(opens in a new tab)"
+     * to the accessible name. Only when leaving would lose the reader's work.
+     */
+    newTab?: boolean;
+    /** `external` only — `false` drops the trailing icon. */
     externalIcon?: boolean;
     /** Layout-only: width, margin, flex placement. */
     className?: ButtonLayoutClassName;

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":"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,0IAA0I;IAC1I,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;AA4GD,eAAO,MAAM,MAAM,2GA4KjB,CAAC"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/Button.tsx"],"names":[],"mappings":"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"}

package/dist/components/atoms/Button/Button.js

@@ -1,177 +1,185 @@
 "use client";
 import { cn as e } from "../../../lib/cn.js";
 import { ButtonBadge as t } from "./ButtonBadge.js";
-import { buttonAlignClasses as n, buttonAligns as r, buttonBaseClasses as i, buttonEmphases as a, buttonEndIconSquareClasses as o, buttonExternalIconClasses as s, buttonLayouts as c, buttonMonoLabelClasses as l, buttonNavLayoutClasses as u, buttonNavStateClasses as d, buttonOutlineQuietClasses as f, buttonPillClass as ee, buttonRoleClasses as p, buttonRoles as m, buttonRowBaseClasses as h, buttonRowLayoutClasses as g, buttonRowWidthClasses as _, buttonSizeClasses as v, buttonWidths as y } from "./buttonStyles.js";
-import { ButtonIcon as b } from "./ButtonIcon.js";
-import { buttonStatusHoldMs as x, defaultStatusLabels as S, getNextButtonStatus as C } from "./buttonStatusStyles.js";
-import { ButtonStatusButton as w } from "./ButtonStatusButton.js";
-import { forwardRef as T } from "react";
-import { SquareArrowOutUpRight as E } from "lucide-react";
-import { jsx as D, jsxs as O } from "react/jsx-runtime";
-import { useRender as k } from "@base-ui/react/use-render";
+import { buttonAlignClasses as n, buttonAligns as r, buttonBaseClasses as i, buttonDisabledReasonClasses as ee, buttonEmphases as a, buttonEndIconSquareClasses as o, buttonExternalIconClasses as te, buttonLayouts as s, buttonMonoLabelClasses as ne, buttonNavLayoutClasses as re, buttonNavStateClasses as ie, buttonOutlineQuietClasses as c, buttonPillClass as l, buttonRoleClasses as u, buttonRoles as d, buttonRowBaseClasses as f, buttonRowLayoutClasses as p, buttonRowWidthClasses as ae, buttonSizeClasses as oe, buttonWidths as m } from "./buttonStyles.js";
+import { ButtonIcon as h } from "./ButtonIcon.js";
+import { buttonStatusHoldMs as g, defaultStatusLabels as _, getNextButtonStatus as v } from "./buttonStatusStyles.js";
+import { ButtonStatusButton as se } from "./ButtonStatusButton.js";
+import { forwardRef as y, useId as ce } from "react";
+import { SquareArrowOutUpRight as b } from "lucide-react";
+import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
+import { useRender as w } from "@base-ui/react/use-render";
 //#region src/components/atoms/Button/Button.tsx
-function A(e) {
+function T(e) {
 	e.external && (e.render == null || e.layout !== "pill") && console.warn("[WMDS Button] `external` needs `render={<a href />}` on a pill button."), e.external && e.endIcon != null && console.warn("[WMDS Button] `external` is mutually exclusive with `endIcon`."), e.width != null && e.layout !== "row" && console.warn("[WMDS Button] `width` applies to `layout=\"row\"` only."), e.align != null && (e.layout === "row" || e.layout === "nav") && console.warn("[WMDS Button] `align` applies to pill buttons only."), e.emphasis != null && e.role !== "outline" && console.warn("[WMDS Button] `emphasis` applies to `role=\"outline\"` only."), (e.layout === "row" || e.layout === "nav") && (e.status != null || e.icon != null || e.count != null || e.endIcon != null || e.mono) && console.warn(`[WMDS Button] \`layout="${e.layout}"\` is mutually exclusive with \`status\`, \`icon\`, \`count\`, \`endIcon\`, and \`mono\`.`), e.status != null && (e.count != null || e.endIcon != null || e.mono) && console.warn("[WMDS Button] `status` is mutually exclusive with `count`, `endIcon`, and `mono`."), e.endIcon != null && e.count != null && console.warn("[WMDS Button] `endIcon` is mutually exclusive with `count`."), e.render != null && (e.layout === "row" || e.status != null) && console.warn("[WMDS Button] `render` is supported on `layout=\"pill\"` and `layout=\"nav\"` without `status` only.");
 }
-var j = T(function({ render: e, type: t, disabled: n, ...r }, i) {
-	return k({
+function E(e) {
+	e.preventDefault(), e.stopPropagation();
+}
+var le = y(function({ render: e, type: t, disabled: n, ...r }, i) {
+	return w({
 		render: e,
 		ref: i,
 		defaultTagName: "button",
-		props: e ? {
+		props: {
 			...r,
+			...e ? null : { type: t },
 			"aria-disabled": n ? !0 : void 0,
 			"data-disabled": n ? "" : void 0,
-			tabIndex: n ? -1 : r.tabIndex
-		} : {
-			...r,
-			type: t,
-			disabled: n
+			onClick: n ? E : r.onClick
 		}
 	});
-}), M = T(function({ render: e, type: t, disabled: n, ...r }, i) {
-	return k({
+}), ue = y(function({ render: e, type: t, disabled: n, ...r }, i) {
+	return w({
 		render: e,
 		ref: i,
 		defaultTagName: "button",
-		props: e ? {
+		props: {
 			...r,
+			...e ? null : { type: t },
 			"aria-disabled": n ? !0 : void 0,
 			"data-disabled": n ? "" : void 0,
-			tabIndex: n ? -1 : r.tabIndex
-		} : {
-			...r,
-			type: t,
-			disabled: n
+			onClick: n ? E : r.onClick
 		}
 	});
-}), N = T(function({ children: r, role: a = "primary", layout: c = "pill", width: m, align: y, emphasis: x, size: S = "md", disabled: C, type: T = "button", status: k, statusLabels: N, disableOnError: P, icon: F, count: I, mono: L = !1, endIcon: R, selected: z = !1, render: B, external: V = !1, externalIcon: H = !0, className: U, onClick: W, "aria-label": G, "aria-pressed": K, "aria-keyshortcuts": q, id: J, name: Y, form: X, ...Z }, Q) {
-	if (A({
-		status: k,
-		icon: F,
-		count: I,
-		layout: c,
-		render: B,
-		endIcon: R,
-		mono: L,
-		width: m,
-		align: y,
-		emphasis: x,
+}), D = y(function({ children: r, role: a = "primary", layout: s = "pill", width: d, align: m, emphasis: g, size: _ = "md", disabled: v, disabledReason: y, type: w = "button", status: D, statusLabels: O, disableOnError: k, icon: A, count: j, mono: M = !1, endIcon: N, selected: P = !1, render: F, external: I = !1, newTab: L = !1, externalIcon: de = !0, className: R, onClick: z, "aria-label": B, "aria-pressed": V, "aria-keyshortcuts": H, id: U, name: W, form: G, ...K }, q) {
+	T({
+		status: D,
+		icon: A,
+		count: j,
+		layout: s,
+		render: F,
+		endIcon: N,
+		mono: M,
+		width: d,
+		align: m,
+		emphasis: g,
 		role: a,
-		external: V
-	}), k != null) return /* @__PURE__ */ D(w, {
-		...Z,
-		ref: Q,
-		status: k,
-		role: a,
-		size: S,
-		statusLabels: N,
-		icon: F,
-		disableOnError: P,
-		disabled: C,
-		className: U,
-		type: T,
-		onClick: W,
-		"aria-label": G,
-		"aria-pressed": K,
-		"aria-keyshortcuts": q,
+		external: I
+	});
+	let J = ce(), Y = !!v && y != null && D == null, X = [K["aria-describedby"], Y ? J : void 0].filter(Boolean).join(" ") || void 0, Z = (e) => Y ? /* @__PURE__ */ C(x, { children: [e, /* @__PURE__ */ S("span", {
 		id: J,
-		name: Y,
-		form: X,
+		className: ee,
+		"data-disabled-reason": "",
+		children: y
+	})] }) : e;
+	if (D != null) return /* @__PURE__ */ S(se, {
+		...K,
+		ref: q,
+		status: D,
+		role: a,
+		size: _,
+		statusLabels: O,
+		icon: A,
+		disableOnError: k,
+		disabled: v,
+		className: R,
+		type: w,
+		onClick: z,
+		"aria-label": B,
+		"aria-pressed": V,
+		"aria-keyshortcuts": H,
+		id: U,
+		name: W,
+		form: G,
 		children: r
 	});
-	if (c === "row") return /* @__PURE__ */ D("button", {
-		...Z,
-		ref: Q,
-		type: T,
-		disabled: C,
-		onClick: W,
-		"aria-label": G,
-		"aria-pressed": K,
-		"aria-keyshortcuts": q,
-		id: J,
-		name: Y,
-		form: X,
-		className: e(h, p[a], g, _[m ?? "fill"], U),
+	if (s === "row") return Z(/* @__PURE__ */ S("button", {
+		...K,
+		ref: q,
+		type: w,
+		"aria-disabled": v || void 0,
+		"data-disabled": v ? "" : void 0,
+		onClick: v ? E : z,
+		"aria-label": B,
+		"aria-pressed": V,
+		"aria-keyshortcuts": H,
+		"aria-describedby": X,
+		id: U,
+		name: W,
+		form: G,
+		className: e(f, u[a], p, ae[d ?? "fill"], R),
 		"data-role": a,
 		"data-layout": "row",
-		"data-width": m ?? "fill",
+		"data-width": d ?? "fill",
 		children: r
-	});
-	if (c === "nav") return /* @__PURE__ */ D(j, {
-		...Z,
-		ref: Q,
-		render: B,
-		type: T,
-		disabled: C,
-		onClick: W,
-		"aria-label": G,
-		"aria-pressed": K,
-		"aria-keyshortcuts": q,
-		"aria-current": z ? "page" : void 0,
-		id: J,
-		name: Y,
-		form: X,
-		className: e(h, u, d(z), U),
+	}));
+	if (s === "nav") return Z(/* @__PURE__ */ S(le, {
+		...K,
+		ref: q,
+		render: F,
+		type: w,
+		disabled: v,
+		onClick: z,
+		"aria-label": B,
+		"aria-pressed": V,
+		"aria-keyshortcuts": H,
+		"aria-current": P ? "page" : void 0,
+		"aria-describedby": X,
+		id: U,
+		name: W,
+		form: G,
+		className: e(f, re, ie(P), R),
 		"data-role": a,
-		"data-size": S,
+		"data-size": _,
 		"data-layout": "nav",
-		"data-selected": z ? "" : void 0,
+		"data-selected": P ? "" : void 0,
 		children: r
-	});
-	let $ = V && B != null;
-	return /* @__PURE__ */ O(M, {
-		...Z,
+	}));
+	let Q = I && F != null, $ = Q && L;
+	return Z(/* @__PURE__ */ C(ue, {
+		...K,
 		...$ ? {
 			target: "_blank",
 			rel: "noopener noreferrer"
 		} : null,
-		ref: Q,
-		render: B,
-		type: T,
-		disabled: C,
-		onClick: W,
-		"aria-label": G,
-		"aria-pressed": K,
-		"aria-keyshortcuts": q,
-		id: J,
-		name: Y,
-		form: X,
-		className: e(i, n[y ?? "center"], a === "outline" && x === "quiet" ? f : p[a], v[S], ee, "gap-2", U),
+		ref: q,
+		render: F,
+		type: w,
+		disabled: v,
+		onClick: z,
+		"aria-label": B,
+		"aria-pressed": V,
+		"aria-keyshortcuts": H,
+		"aria-describedby": X,
+		id: U,
+		name: W,
+		form: G,
+		className: e(i, n[m ?? "center"], a === "outline" && g === "quiet" ? c : u[a], oe[_], l, "gap-2", R),
 		"data-role": a,
-		"data-size": S,
-		"data-align": y,
-		"data-emphasis": a === "outline" ? x ?? "strong" : void 0,
-		"data-mono": L ? "" : void 0,
-		"data-end-icon": R ? "" : void 0,
-		"data-external": $ ? "" : void 0,
+		"data-size": _,
+		"data-align": m,
+		"data-emphasis": a === "outline" ? g ?? "strong" : void 0,
+		"data-mono": M ? "" : void 0,
+		"data-end-icon": N ? "" : void 0,
+		"data-external": Q ? "" : void 0,
 		children: [
-			F ? /* @__PURE__ */ D(b, {
-				size: S,
-				children: F
+			A ? /* @__PURE__ */ S(h, {
+				size: _,
+				children: A
 			}) : null,
-			/* @__PURE__ */ O("span", {
-				className: L ? l : void 0,
-				children: [r, $ ? /* @__PURE__ */ D("span", {
+			/* @__PURE__ */ C("span", {
+				className: M ? ne : void 0,
+				children: [r, $ ? /* @__PURE__ */ S("span", {
 					className: "sr-only",
 					children: " (opens in a new tab)"
 				}) : null]
 			}),
-			$ && H ? /* @__PURE__ */ D(E, {
-				className: s,
+			Q && de ? /* @__PURE__ */ S(b, {
+				className: te,
 				strokeWidth: 2,
 				"aria-hidden": !0
 			}) : null,
-			R ? /* @__PURE__ */ D("span", {
+			N ? /* @__PURE__ */ S("span", {
 				className: o,
-				children: /* @__PURE__ */ D(b, {
+				children: /* @__PURE__ */ S(h, {
 					size: "xs",
-					children: R
+					children: N
 				})
 			}) : null,
-			I == null ? null : /* @__PURE__ */ D(t, { value: I })
+			j == null ? null : /* @__PURE__ */ S(t, { value: j })
 		]
-	});
+	}));
 });
 //#endregion
-export { N as Button, r as buttonAligns, a as buttonEmphases, c as buttonLayouts, m as buttonRoles, x as buttonStatusHoldMs, y as buttonWidths, S as defaultStatusLabels, C as getNextButtonStatus };
+export { D as Button, r as buttonAligns, a as buttonEmphases, s as buttonLayouts, d as buttonRoles, g as buttonStatusHoldMs, m as buttonWidths, _ as defaultStatusLabels, v as getNextButtonStatus };

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

@@ -26,7 +26,7 @@ export declare const buttonAlignClasses: Record<ButtonAlign, string>;
  * Mono uppercase label. `!` beats the sans medium shell.
  * Size is `--font-size-sm` (12px) — small, still a control label.
  */
-export declare const buttonMonoLabelClasses = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !leading-none !tracking-[0.14em]";
+export declare const buttonMonoLabelClasses = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !leading-none !tracking-[0.12em]";
 /** Trailing new-tab glyph on an `external` link button — the icon **TextLink** `external` shows. */
 export declare const buttonExternalIconClasses = "-ml-0.5 size-[0.85em] shrink-0 stroke-current";
 /** Trailing accent square for a Lucide glyph (`endIcon`). */
@@ -46,4 +46,6 @@ export declare const buttonRowWidthClasses: Record<ButtonWidth, string>;
 /** Inset nav row — **NavList** rows (icon + label + optional count as children). */
 export declare const buttonNavLayoutClasses: string;
 export declare function buttonNavStateClasses(selected: boolean): string;
+/** The reason beside a disabled button (Buttons rule U6): supporting type, muted ink (9.8:1). */
+export declare const buttonDisabledReasonClasses = "type-supporting text-muted";
 //# sourceMappingURL=buttonStyles.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"buttonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStyles.ts"],"names":[],"mappings":"AAMA,uEAAuE;AACvE,eAAO,MAAM,WAAW,oGAQd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,oCAAoC,CAAC;AAEjE,eAAO,MAAM,aAAa,iCAAkC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,8FAA8F;AAC9F,eAAO,MAAM,YAAY,0BAA2B,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,uGAAuG;AACvG,eAAO,MAAM,YAAY,8BAA+B,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,sGAAsG;AACtG,eAAO,MAAM,cAAc,8BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,iBAAiB,QAUd,CAAC;AAEjB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAmBxD,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,2GACuE,CAAC;AAE3G,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,kDAAkD,CAAC;AAEzF,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,kGAC0D,CAAC;AAElG,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK9D,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK5D,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAKhE,CAAC;AAEF,kHAAkH;AAClH,eAAO,MAAM,oBAAoB,QAK+C,CAAC;AAEjF,eAAO,MAAM,sBAAsB,QAEqB,CAAC;AAEzD,mHAAmH;AACnH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG7D,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,QAGqB,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAI/D"}
+{"version":3,"file":"buttonStyles.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/Button/buttonStyles.ts"],"names":[],"mappings":"AAMA,uEAAuE;AACvE,eAAO,MAAM,WAAW,oGAQd,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD,MAAM,MAAM,UAAU,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEnD,MAAM,MAAM,cAAc,GAAG,UAAU,CAAC;AAExC,iGAAiG;AACjG,eAAO,MAAM,eAAe,oCAAoC,CAAC;AAEjE,eAAO,MAAM,aAAa,iCAAkC,CAAC;AAE7D,MAAM,MAAM,YAAY,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AAE1D,8FAA8F;AAC9F,eAAO,MAAM,YAAY,0BAA2B,CAAC;AAErD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,uGAAuG;AACvG,eAAO,MAAM,YAAY,8BAA+B,CAAC;AAEzD,MAAM,MAAM,WAAW,GAAG,CAAC,OAAO,YAAY,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD,sGAAsG;AACtG,eAAO,MAAM,cAAc,8BAA+B,CAAC;AAE3D,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC;AAE7D,eAAO,MAAM,iBAAiB,QAWd,CAAC;AAEjB,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAmBxD,CAAC;AAEF,yGAAyG;AACzG,eAAO,MAAM,yBAAyB,4FACqD,CAAC;AAE5F,4FAA4F;AAC5F,eAAO,MAAM,kBAAkB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG1D,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,sBAAsB,2GACuE,CAAC;AAE3G,oGAAoG;AACpG,eAAO,MAAM,yBAAyB,kDAAkD,CAAC;AAEzF,6DAA6D;AAC7D,eAAO,MAAM,0BAA0B,kGAC0D,CAAC;AAElG,2FAA2F;AAC3F,eAAO,MAAM,uBAAuB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK9D,CAAC;AAEF,8FAA8F;AAC9F,eAAO,MAAM,iBAAiB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAKxD,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAK5D,CAAC;AAEF,0FAA0F;AAC1F,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAKhE,CAAC;AAEF,kHAAkH;AAClH,eAAO,MAAM,oBAAoB,QAM8D,CAAC;AAEhG,eAAO,MAAM,sBAAsB,QAEqB,CAAC;AAEzD,mHAAmH;AACnH,eAAO,MAAM,qBAAqB,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAG7D,CAAC;AAEF,oFAAoF;AACpF,eAAO,MAAM,sBAAsB,QAGqB,CAAC;AAEzD,wBAAgB,qBAAqB,CAAC,QAAQ,EAAE,OAAO,GAAG,MAAM,CAI/D;AAED,iGAAiG;AACjG,eAAO,MAAM,2BAA2B,+BAA+B,CAAC"}