@thewhatmatters/wmds 0.4.28 → 0.4.30

package/CHANGELOG.md

@@ -7,6 +7,58 @@ 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.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.**
+
+- **SiteNav** mobile menu trigger says what it does: its label is "Close menu" while the sheet is open ("Open menu" when closed), it sets `aria-haspopup="dialog"`, and `aria-controls` points at the sheet's dialog while it is open (omitted when closed, since the sheet is unmounted). **Sheet.Content** takes `id` (new), set on the `role="dialog"` panel. New interaction test **Internal/Interactions/SiteNav → mobile menu trigger names its state and controls the sheet**.
+
+### Consumer actions
+
+None.
+
 ## 0.4.28
 
 **AlertDialog takes a body, Input takes a rich label, and dialogs get a roomier edge.**

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"}

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

@@ -14,7 +14,7 @@ var i = [
 	"pill",
 	"row",
 	"nav"
-], s = ["fill", "hug"], c = ["center", "start"], l = ["strong", "quiet"], u = "inline-flex cursor-pointer items-center font-sans font-medium normal-case tracking-normal transition-[color,transform,box-shadow,border-color,outline-color,background-color] " + n("fast") + " " + r + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:opacity-50 no-underline", d = {
+], s = ["fill", "hug"], c = ["center", "start"], l = ["strong", "quiet"], u = "inline-flex cursor-pointer items-center font-sans font-medium normal-case tracking-normal transition-[color,transform,box-shadow,border-color,outline-color,background-color] " + n("fast") + " " + r + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-body disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:opacity-70 no-underline", d = {
 	primary: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
 	secondary: "bg-secondary text-secondary-foreground shadow-raised hover:bg-secondary-hover active:bg-secondary-active",
 	ghost: "bg-transparent text-ghost-foreground hover:bg-ghost-hover active:bg-ghost-active",
@@ -25,7 +25,7 @@ var i = [
 }, f = "border border-border bg-transparent text-fg hover:bg-ghost-hover active:bg-ghost-active", p = {
 	center: "justify-center",
 	start: "justify-start text-left"
-}, m = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !leading-none !tracking-[0.14em]", h = "-ml-0.5 size-[0.85em] shrink-0 stroke-current", g = "inline-flex size-5 shrink-0 items-center justify-center rounded-none bg-accent text-on-accent", _ = {
+}, m = "!font-mono !text-[length:var(--font-size-sm)] !font-normal !uppercase !leading-none !tracking-[0.12em]", h = "-ml-0.5 size-[0.85em] shrink-0 stroke-current", g = "inline-flex size-5 shrink-0 items-center justify-center rounded-none bg-accent text-on-accent", _ = {
 	xs: "px-3.5",
 	sm: "px-4",
 	md: "px-5",
@@ -45,12 +45,13 @@ var i = [
 	sm: t.md,
 	md: t.lg,
 	lg: "size-12 shrink-0"
-}, x = "flex cursor-pointer items-center font-sans tracking-normal transition-[color,background-color,outline-color] " + n("fast") + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-50", S = "h-auto min-h-0 rounded-md px-1.5 py-1 text-left font-normal focus-visible:ring-inset focus-visible:ring-offset-0", C = {
+}, x = "flex cursor-pointer items-center font-sans tracking-normal transition-[color,background-color,outline-color] " + n("fast") + " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring disabled:cursor-not-allowed disabled:pointer-events-none disabled:opacity-70 aria-disabled:cursor-not-allowed aria-disabled:pointer-events-none aria-disabled:opacity-70", S = "h-auto min-h-0 rounded-md px-1.5 py-1 text-left font-normal focus-visible:ring-inset focus-visible:ring-offset-0", C = {
 	fill: "w-full justify-between gap-3",
 	hug: "w-auto justify-start gap-1.5"
 }, w = "h-auto min-h-0 w-full justify-start gap-2.5 rounded-[var(--radius-control-box)] px-2.5 py-2 text-left text-sm font-normal leading-[var(--line-height-sm)] focus-visible:ring-inset focus-visible:ring-offset-0";
 function T(e) {
 	return e ? "bg-secondary text-secondary-foreground" : "bg-transparent text-muted hover:bg-ghost-hover hover:text-fg";
 }
+var E = "type-supporting text-muted";
 //#endregion
-export { p as buttonAlignClasses, c as buttonAligns, u as buttonBaseClasses, l as buttonEmphases, g as buttonEndIconSquareClasses, h as buttonExternalIconClasses, _ as buttonHorizontalPadding, y as buttonIconSizeClasses, o as buttonLayouts, m as buttonMonoLabelClasses, w as buttonNavLayoutClasses, T as buttonNavStateClasses, f as buttonOutlineQuietClasses, a as buttonPillClass, d as buttonRoleClasses, i as buttonRoles, x as buttonRowBaseClasses, S as buttonRowLayoutClasses, C as buttonRowWidthClasses, v as buttonSizeClasses, s as buttonWidths, b as iconButtonSizeClasses };
+export { p as buttonAlignClasses, c as buttonAligns, u as buttonBaseClasses, E as buttonDisabledReasonClasses, l as buttonEmphases, g as buttonEndIconSquareClasses, h as buttonExternalIconClasses, _ as buttonHorizontalPadding, y as buttonIconSizeClasses, o as buttonLayouts, m as buttonMonoLabelClasses, w as buttonNavLayoutClasses, T as buttonNavStateClasses, f as buttonOutlineQuietClasses, a as buttonPillClass, d as buttonRoleClasses, i as buttonRoles, x as buttonRowBaseClasses, S as buttonRowLayoutClasses, C as buttonRowWidthClasses, v as buttonSizeClasses, s as buttonWidths, b as iconButtonSizeClasses };