@hirobius/design-system 0.23.0 → 0.23.2

package/AGENTS.md

@@ -110,7 +110,7 @@ the full engineering protocol; this section is the home for autonomous-loop rule
 ## Ralph quality bar
 
 REPO_TYPE: library
-QUALITY BAR: Public npm package. Backward compatibility matters. Tests + Storybook stories required.
+QUALITY BAR: Public npm package. Backward compatibility matters. Tests required, and a live demo on the docs site (docs-site/components/component-demos.tsx) for a core component or pattern.
 
 Rules for any autonomous loop in this repo:
 

package/CHANGELOG.md

@@ -1,5 +1,50 @@
 # Changelog
 
+## 0.23.2
+
+### Upgrade
+
+```sh
+npx @hirobius/design-system@latest upgrade
+```
+
+- Looks different: The disabled primary Button fill is now the muted surface instead of the accent-subtle surface.
+- Looks different: The disabled primary Button text is now the disabled content colour instead of the on-accent colour.
+- Every step is also in [UPGRADING.md](https://github.com/hirobius/hds/blob/main/UPGRADING.md#0232).
+
+### Patch Changes
+
+- b2ebd7d: A disabled primary Button now reads as a neutral muted button in light and dark: `component.button.primary.bgDisabled` points at `semantic.color.surface.muted` and `textDisabled` at `semantic.color.content.disabled` (they were `accentSubtle` and `onAccent`, which assumed a coloured accent), and Button binds those tokens. The small Button's icon is 12px, as its `component.button.size.sm.iconSize` token says (it was 14px); medium and large are unchanged at 16px and 20px.
+- 4626131: Storybook is gone from the repo (retirement, step 3): the `storybook` package keyword, the story files, the Storybook config and the Storybook-only scripts are removed. The docs site is the visual verification surface. Nothing for a consumer to change.
+- 9f1acfc: The manifest (`public/hds-manifest.json`) points each core component and pattern at its docs-site page with `docsPage` (for example `/docs/components/button`), replacing `storyFiles` and `storyIds`. `AGENTS.md` and the llms files now point agents at the docs site instead of the Storybook stories.
+
+## 0.23.1
+
+### Upgrade
+
+```sh
+npx @hirobius/design-system@latest upgrade
+```
+
+- Looks different: The scoped HDS font variable now names Plus Jakarta Sans first instead of Satoshi.
+- Looks different: Display and title text now renders in Plus Jakarta Sans instead of Satoshi.
+- Looks different: Body, UI and caption text now renders in Plus Jakarta Sans instead of Satoshi.
+- Looks different: fonts.css no longer declares Satoshi 400; it declares Plus Jakarta Sans 400 instead, so drop any font-family: Satoshi of your own.
+- And 2 more: see [UPGRADING.md](https://github.com/hirobius/hds/blob/main/UPGRADING.md#0231).
+
+### Patch Changes
+
+- d907e73: CONSUMING.md points agents at the docs site (https://hirobius-hds-components.vercel.app/llms.txt), which now serves the llms files, the manifest, DESIGN.md and component-api.json.
+- 29af78f: feat(brand): the primary and display typeface is now Plus Jakarta Sans.
+
+  Satoshi's license (the Fontshare FF EULA) does not allow the font files to be redistributed, so HDS could not keep shipping them in the package or a public repo. Plus Jakarta Sans (Tokotype, SIL Open Font License 1.1) replaces it in the same three weights: 400 body, 500 UI and captions, 700 display and titles.
+  - `primitive.typography.family.primary` and `.display` now start with `"Plus Jakarta Sans"`, with the same system fallback stack.
+  - `@hirobius/design-system/fonts.css` now declares Plus Jakarta Sans 400/500/700, as Latin-subset woff2 files of about 15 KB each (Satoshi's were about 26 KB). The OFL license text ships beside the fonts in `dist/fonts/`.
+  - `package.json` `license` is now `MIT AND OFL-1.1`, since every bundled font is OFL.
+  - `ch`-based widths read a little wider in Figma, because the "0" advance is 0.732em instead of 0.683em.
+
+  Visual-only, with no API changes. If you import `fonts.css`, the new face loads with nothing else to do.
+
 ## 0.23.0
 
 ### Upgrade

package/CONSUMING.md

@@ -29,7 +29,7 @@ version keeps the `LucideIcon` type identical).
 ```tsx
 import { Button, Card, Dialog } from '@hirobius/design-system';
 import '@hirobius/design-system/tokens.css'; // required — design tokens as CSS vars
-import '@hirobius/design-system/fonts.css'; // optional — the HDS brand fonts (Satoshi, IBM Plex Mono)
+import '@hirobius/design-system/fonts.css'; // optional — the HDS brand fonts (Plus Jakarta Sans, IBM Plex Mono)
 
 export function Example() {
   return (
@@ -45,7 +45,7 @@ Available subpaths:
 | Import                               | What                                                                                                                                                                                                                                        |
 | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@hirobius/design-system`            | The 43-component core set ([README → What belongs in the system](README.md#what-belongs-in-the-system)), the rest of the allow-list and the templates; the `pattern` tier is only in `/patterns`                                            |
-| `@hirobius/design-system/fonts.css`  | Optional brand fonts (Satoshi, IBM Plex Mono); woff2 files ship in the package, relative URLs, `font-display: swap`                                                                                                                         |
+| `@hirobius/design-system/fonts.css`  | Optional brand fonts (Plus Jakarta Sans, IBM Plex Mono); woff2 files ship in the package, relative URLs, `font-display: swap`                                                                                                               |
 | `@hirobius/design-system/tokens.css` | Token CSS variables (import once at app root)                                                                                                                                                                                               |
 | `@hirobius/design-system/tokens`     | Token values as TS constants                                                                                                                                                                                                                |
 | `@hirobius/design-system/cn`         | `cn()` class-merge helper                                                                                                                                                                                                                   |
@@ -103,7 +103,7 @@ them without network access. Under `node_modules/@hirobius/design-system/`:
 - `DESIGN.md` - the lean visual spec
 - `src/app/data/component-api.json` - full prop reference
 
-The same files are served at <https://hirobius-design-system.vercel.app/llms.txt>
+The same files are served at <https://hirobius-hds-components.vercel.app/llms.txt>
 (and `/llms-full.txt`, `/llms/components.txt`, `/DESIGN.md`, `/component-api.json`).
 
 ## 3. Receiving updates

package/DESIGN.md

@@ -28,8 +28,8 @@ Feedback hues are never decorative; do not use them as accents. Light and dark m
 <!-- auto:start:typography -->
 HDS ships three typefaces — each with a distinct and exclusive role:
 
-- **Display / Heading font**: Satoshi. Bound exclusively to the `display` and `title` styles. Never used for body copy or UI labels.
-- **Body / UI font**: Satoshi. All prose, labels, small text, captions, and UI copy.
+- **Display / Heading font**: Plus Jakarta Sans. Bound exclusively to the `display` and `title` styles. Never used for body copy or UI labels.
+- **Body / UI font**: Plus Jakarta Sans. All prose, labels, small text, captions, and UI copy.
 - **Mono font**: IBM Plex Mono. Reserved for tokens, code, technical callouts, and metric readouts.
 
 Weights declared: `400` regular, `500` medium, `700` bold. Heading styles (display · title) use `700` bold; body, UI, and caption use `400` regular / `500` medium.

package/NOTICE.md

@@ -1,9 +1,9 @@
 # License notice
 
-`@hirobius/design-system` is not under a single license.
+`@hirobius/design-system` is under two licenses: MIT for the code, and the SIL Open Font License 1.1 for the bundled fonts.
 
 - **HDS code** (components, compiled JavaScript, types, CSS, and token files): MIT. See [LICENSE](LICENSE).
-- **Satoshi** (weights 400, 500 and 700, by Indian Type Foundry, distributed through [Fontshare](https://www.fontshare.com/fonts/satoshi)): ITF Free Font License.
+- **Plus Jakarta Sans** (weights 400, 500 and 700, by Tokotype, [source](https://github.com/tokotype/PlusJakartaSans), Latin subset): SIL Open Font License 1.1.
 - **IBM Plex Mono** (weight 400, by IBM, [source](https://github.com/IBM/plex)): SIL Open Font License 1.1.
 
-Both fonts are embedded as base64 `@font-face` data in `dist/tokens.css` and `dist/styles.css`. The MIT license does not cover them; each font keeps its own license. `dist/variables.css` embeds no fonts.
+Both fonts ship as woff2 files in `dist/fonts/`, declared by the opt-in `dist/fonts.css`; each font's license text ships beside it as `dist/fonts/<family>-LICENSE.txt`. The MIT license does not cover the fonts. `dist/tokens.css`, `dist/styles.css` and `dist/variables.css` embed no fonts.

package/README.md

@@ -1,11 +1,11 @@
 # Hirobius Design System
 
-[![CI](https://github.com/hirobius/hds/actions/workflows/ci.yml/badge.svg)](https://github.com/hirobius/hds/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@hirobius/design-system)](https://www.npmjs.com/package/@hirobius/design-system) [![Storybook](https://img.shields.io/badge/Storybook-live-ff4785)](https://hirobius-design-system.vercel.app)
+[![CI](https://github.com/hirobius/hds/actions/workflows/ci.yml/badge.svg)](https://github.com/hirobius/hds/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@hirobius/design-system)](https://www.npmjs.com/package/@hirobius/design-system) [![Docs](https://img.shields.io/badge/Docs-live-000000)](https://hirobius-hds-components.vercel.app)
 
 **A governed, token-first React design system.** Components plus the system
 around them: a DTCG token pipeline (CSS variables + TypeScript constants),
 quality gates in git hooks and CI, one-way Figma sync, and WCAG-checked contrast
-and focus. Live Storybook: **<https://hirobius-design-system.vercel.app>**
+and focus. Live docs: **<https://hirobius-hds-components.vercel.app>**
 
 ```bash
 pnpm add @hirobius/design-system
@@ -13,20 +13,19 @@ pnpm add @hirobius/design-system
 
 Upgrading: [UPGRADING.md](UPGRADING.md) lists what each release asks of you. From 0.22.0, `npx @hirobius/design-system@latest upgrade` does it for you.
 
-[![Buttons under the Brand and Theme dials: base and accent-lilac, light and dark](docs/images/storybook-brand-theme-dials.png)](https://hirobius-design-system.vercel.app)
+[![Buttons under the Brand and Theme dials: base and accent-lilac, light and dark](docs/images/brand-theme-dials.png)](https://hirobius-hds-components.vercel.app)
 
 <!-- auto:start:front-door-counts -->
 
 - **53** public component modules, exported from `src/index.ts`
 - **400** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
-- **341** Storybook stories in **71** story files
 
 <!-- auto:end:front-door-counts -->
 
 What the system includes:
 
 - **Token pipeline.** DTCG tokens in `hirobius.tokens.json` compile to CSS variables and TypeScript constants through a validated alias chain, with AA-contrast gates in light and dark.
-- **Gates with proof-of-firing.** Typecheck, zero-warning ESLint, token validity and contrast, Vitest unit and contract tests, bundle budgets, a consumer smoke build, and a Storybook build — run in git hooks and CI. Many gates carry a passing and a violating fixture that demonstrate the gate catches what it describes.
+- **Gates with proof-of-firing.** Typecheck, zero-warning ESLint, token validity and contrast, Vitest unit and contract tests, bundle budgets, a consumer smoke build, and a docs-site build with an axe gate — run in git hooks and CI. Many gates carry a passing and a violating fixture that demonstrate the gate catches what it describes.
 - **Upgrade path.** A release ledger and one consumer command: `npx @hirobius/design-system@latest upgrade`.
 - **One-way Figma sync.** Code is the source of truth; tokens project into Figma, and `pnpm check:figma-drift` compares a committed snapshot against the model.
 - **Theming without JavaScript.** Four root attributes — theme, density, brand, font — re-skin HDS descendants through CSS variables.
@@ -128,12 +127,12 @@ HDS theming is driven by root attributes + CSS variables, so it works with **zer
 JavaScript** — set them on any element (React, Astro, plain HTML) and every HDS
 descendant re-skins:
 
-| Dial    | Attribute / var                                | Values          | Default                 |
-| ------- | ---------------------------------------------- | --------------- | ----------------------- |
-| theme   | `data-theme`                                   | `dark`          | light (unset)           |
-| density | `data-density`                                 | `compact`       | comfortable (unset)     |
-| brand   | `data-brand` (+ `data-tenant` alias)           | overlay slug    | base (unset)            |
-| font    | `--hds-font-family` / `--hds-font-family-mono` | any font-family | Satoshi / IBM Plex Mono |
+| Dial    | Attribute / var                                | Values          | Default                           |
+| ------- | ---------------------------------------------- | --------------- | --------------------------------- |
+| theme   | `data-theme`                                   | `dark`          | light (unset)                     |
+| density | `data-density`                                 | `compact`       | comfortable (unset)               |
+| brand   | `data-brand` (+ `data-tenant` alias)           | overlay slug    | base (unset)                      |
+| font    | `--hds-font-family` / `--hds-font-family-mono` | any font-family | Plus Jakarta Sans / IBM Plex Mono |
 
 ```html
 <!-- zero-JS: static markup (e.g. an Astro layout) -->
@@ -178,7 +177,7 @@ What each Figma plan allows, and the Pro-plan architecture this follows, are in
 pnpm install
 # Generated data files are gitignored; create them once (the same step CI runs):
 node scripts/generate-manifest.mjs && node scripts/generate-component-api.mjs && node scripts/enrich-manifest.mjs && node scripts/sync-icons.mjs && node scripts/audit-tokens.mjs --full
-pnpm storybook   # component workbench on http://localhost:6006
+pnpm docs:dev   # docs site (component pages with live demos)
 ```
 
 Core verification commands:
@@ -189,7 +188,7 @@ pnpm lint
 pnpm test              # pretest gates + unit + contract tests, exactly as the pre-push hook and CI run them
 pnpm tokens:verify
 pnpm check:size
-pnpm build-storybook
+pnpm docs:publish      # docs-site build, then: node scripts/check-docs-axe.mjs
 ```
 
 ## Architecture
@@ -219,7 +218,7 @@ What CI and the hooks check today, and nothing more:
 - **Contrast:** `scripts/check-contrast.mjs` enforces WCAG AA contrast on the core token pairs, in light and dark. It runs in CI and the pre-commit hook.
 - **Lint:** `jsx-a11y` rules run inside ESLint with zero warnings allowed.
 - **Focus:** `scripts/check-focus-states.mjs` (`pnpm check:focus`) audits focus styles on interactive components. It runs in `pretest` under `pnpm test`, so in the pre-push hook and in CI, and passes with 0 violations.
-- **Storybook:** the `addon-a11y` panel shows axe results for each story while you review it. The gate is `scripts/check-storybook-axe.mjs`: CI scans every built story in light and dark, including the open Select and Combobox, and fails on serious or critical violations outside its allowlist (`scripts/axe-allowlist.json`). The allowlist has one entry: `aria-hidden-focus` on the open Select story, where Radix Select hides the page around its listbox while focus stays trapped inside it (hds#407).
+- **Docs site:** `scripts/check-docs-axe.mjs` (`pnpm check:docs-axe`, after `pnpm docs:publish`) scans the live demo of every `/docs/components/*` and `/docs/patterns/*` page of the built docs site in light and dark with the same axe rules, scoped to the demo frame so the Fumadocs chrome does not count. CI runs it and fails on serious or critical violations outside `scripts/docs-axe-allowlist.json`, which is empty.
 
 Screen-reader output is checked by `tests/primitive-contracts/screen-reader.contract.test.tsx`, which runs in `pnpm test` and walks Dialog, Menu, Select, Combobox, Table and Alert with a virtual screen-reader (`@guidepup/virtual-screen-reader`) under jsdom, asserting the role, name and state phrases it reads and the alert's live-region announcement; it reads the jsdom accessibility tree, not what a desktop or mobile screen-reader says.
 
@@ -238,8 +237,8 @@ The gates are deterministic and need no browser or live site:
 
 - **pre-commit** (`.husky/pre-commit`): secrets scan, Prettier on staged files, typecheck, zero-warning ESLint, and token validity and contrast.
 - **pre-push** (`.husky/pre-push`): `pnpm test` (the pretest gates, then Vitest unit and contract tests), then the consumer smoke build (library build, subpath resolution, publint, consumer typecheck).
-- **CI** (`.github/workflows/ci.yml`): typecheck, zero-warning ESLint, token validity and contrast, Vitest, and the consumer smoke build, plus bundle budgets and a Storybook build.
-- **Visual review:** Storybook is the visual verification surface, reviewed by hand. The earlier browser test suite drove a docs site that no longer exists and was removed (ADR-018).
+- **CI** (`.github/workflows/ci.yml`): typecheck, zero-warning ESLint, token validity and contrast, Vitest, and the consumer smoke build, plus bundle budgets and the docs-site build with its axe gate.
+- **Visual review:** the docs site (`docs-site/`) is the visual verification surface: every core component and pattern has a page with a live demo, `check-docs-axe` gates its accessibility.
 
 ### Agent consistency
 
@@ -284,4 +283,4 @@ public/
 
 ## License
 
-The HDS code is MIT ([LICENSE](LICENSE)). The package CSS also embeds the Satoshi and IBM Plex Mono fonts, which keep their own licenses and are not covered by MIT. See [NOTICE.md](NOTICE.md).
+The HDS code is MIT ([LICENSE](LICENSE)). The package CSS also embeds the Plus Jakarta Sans and IBM Plex Mono fonts, which keep their own licenses and are not covered by MIT. See [NOTICE.md](NOTICE.md).

package/UPGRADING.md

@@ -1,6 +1,6 @@
 # Upgrading @hirobius/design-system
 
-This file only knows the releases up to the version you have installed, 0.23.0. For newer releases, run `npx @hirobius/design-system@latest upgrade`: it always fetches the newest steps.
+This file only knows the releases up to the version you have installed, 0.23.2. For newer releases, run `npx @hirobius/design-system@latest upgrade`: it always fetches the newest steps.
 
 ## How to upgrade
 
@@ -10,6 +10,28 @@ npx @hirobius/design-system@latest upgrade
 
 It finds the version you have, moves you to the newest release, runs each release's codemods (Fixed for you) and lists what is left for you (Do by hand). It works from 0.16.0 on; from an older version, first reach 0.16.0 with the notes in CHANGELOG.md. MIGRATIONS.md has longer guides for the big releases.
 
+## 0.23.2
+
+Released 2026-10-11 (patch). 2 that look different.
+
+### Looks different
+
+- The disabled primary Button fill is now the muted surface instead of the accent-subtle surface.
+- The disabled primary Button text is now the disabled content colour instead of the on-accent colour.
+
+## 0.23.1
+
+Released 2026-10-11 (patch). 6 that look different.
+
+### Looks different
+
+- The scoped HDS font variable now names Plus Jakarta Sans first instead of Satoshi.
+- Display and title text now renders in Plus Jakarta Sans instead of Satoshi.
+- Body, UI and caption text now renders in Plus Jakarta Sans instead of Satoshi.
+- fonts.css no longer declares Satoshi 400; it declares Plus Jakarta Sans 400 instead, so drop any font-family: Satoshi of your own.
+- fonts.css no longer declares Satoshi 500; it declares Plus Jakarta Sans 500 instead, so drop any font-family: Satoshi of your own.
+- fonts.css no longer declares Satoshi 700; it declares Plus Jakarta Sans 700 instead, so drop any font-family: Satoshi of your own.
+
 ## 0.23.0
 
 Released 2026-10-10 (minor). 14 that look different.

package/codemods/hds-prefix.mjs

@@ -46,7 +46,6 @@ const SKIP_DIRS = new Set([
   '.next',
   '.vercel',
   'coverage',
-  'storybook-static',
 ]);
 
 /** The aliases 0.19.1 exported from the root, and the bare name each pointed at. */

package/codemods/jsx-fold.mjs

@@ -40,7 +40,6 @@ const SKIP_DIRS = new Set([
   '.next',
   '.vercel',
   'coverage',
-  'storybook-static',
 ]);
 const ID = String.raw`[A-Za-z_$][\w$]*`;
 const esc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

package/codemods/lib/scan.mjs

@@ -28,7 +28,6 @@ export const SKIP_DIRS = new Set([
   '.turbo',
   '.svelte-kit',
   'coverage',
-  'storybook-static',
 ]);
 
 const CODE = new Set(['.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.mts', '.cts', '.mdx']);

package/codemods/patterns-subpath.mjs

@@ -59,7 +59,6 @@ const SKIP_DIRS = new Set([
   '.next',
   '.vercel',
   'coverage',
-  'storybook-static',
 ]);
 
 export function loadPatternNames() {

package/dist/chunks/{empty-state-ChC_xZfg.js → empty-state-BQ1v7ZIx.js}

@@ -128,7 +128,7 @@ const Ne = {
     spacious: "var(--semantic-space-layout-spacious)"
   },
   numbers: "units"
-}, j = (t, e) => Object.prototype.hasOwnProperty.call(t, e) ? t[e] : void 0, _e = {
+}, z = (t, e) => Object.prototype.hasOwnProperty.call(t, e) ? t[e] : void 0, _e = {
   tight: "sm",
   normal: "md",
   inset: "lg",
@@ -153,7 +153,7 @@ const Ne = {
   columnGap: ["column-gap"]
 };
 function $(t, e) {
-  return "closed" in e ? typeof t == "string" ? j(e.names, t) : void 0 : typeof t == "number" ? e.numbers === "raw" ? t : Re.has(t) ? `var(--primitive-space-${t})` : `calc(var(--primitive-space-1) * ${t})` : j(e.names, t) ?? t;
+  return "closed" in e ? typeof t == "string" ? z(e.names, t) : void 0 : typeof t == "number" ? e.numbers === "raw" ? t : Re.has(t) ? `var(--primitive-space-${t})` : `calc(var(--primitive-space-1) * ${t})` : z(e.names, t) ?? t;
 }
 const Oe = {
   color: "color",
@@ -161,7 +161,7 @@ const Oe = {
   borderColor: "border-color",
   fill: "fill",
   stroke: "stroke"
-}, $e = /* @__PURE__ */ new Set(["primary", "secondary", "disabled", "inverse", "accent"]), Ie = /* @__PURE__ */ new Set(["page", "raised", "overlay", "accent"]), Le = /* @__PURE__ */ new Set(["default", "subtle", "subdued", "strong", "accent"]), je = /* @__PURE__ */ new Set(["success", "warning", "error", "info"]), ze = /* @__PURE__ */ new Set(["hover", "pressed", "subtle", "content"]);
+}, $e = /* @__PURE__ */ new Set(["primary", "secondary", "disabled", "inverse", "accent"]), Ie = /* @__PURE__ */ new Set(["page", "raised", "overlay", "accent"]), Le = /* @__PURE__ */ new Set(["default", "subtle", "subdued", "strong", "accent"]), ze = /* @__PURE__ */ new Set(["success", "warning", "error", "info"]), je = /* @__PURE__ */ new Set(["hover", "pressed", "subtle", "content"]);
 function Me(t) {
   if (t === "accent") return "var(--semantic-accent-rest)";
   const e = t.indexOf(".");
@@ -170,8 +170,8 @@ function Me(t) {
   if (r === "content" && $e.has(n)) return `var(--semantic-color-content-${n})`;
   if (r === "surface" && Ie.has(n)) return `var(--semantic-color-surface-${n})`;
   if (r === "border" && Le.has(n)) return `var(--semantic-color-border-${n})`;
-  if (r === "feedback" && je.has(n)) return `var(--semantic-color-feedback-${n})`;
-  if (r === "accent" && ze.has(n)) return `var(--semantic-accent-${n})`;
+  if (r === "feedback" && ze.has(n)) return `var(--semantic-color-feedback-${n})`;
+  if (r === "accent" && je.has(n)) return `var(--semantic-accent-${n})`;
 }
 function Be(t) {
   return t.replace(/[A-Z]/g, (e) => `-${e.toLowerCase()}`);
@@ -179,7 +179,7 @@ function Be(t) {
 function W(t, e) {
   const r = Pe[t];
   if (r) {
-    const c = typeof e == "string" ? j(_e, e) : void 0;
+    const c = typeof e == "string" ? z(_e, e) : void 0;
     c && Ae(
       `box-sx-spacing-${e}`,
       `Box sx spacing name '${e}' is deprecated (hds#206) and is removed in 1.0.0. Use '${c}': same pixels at the default density, tighter under compact (MIGRATIONS.md).`
@@ -237,8 +237,8 @@ function Ge(t, e) {
   }
   return d;
 }
-function z(t) {
-  return t === void 0 ? "undefined" : t === null || typeof t != "object" ? JSON.stringify(t) : Array.isArray(t) ? `[${t.map(z).join(",")}]` : `{${Object.keys(t).sort().map((r) => `${JSON.stringify(r)}:${z(t[r])}`).join(",")}}`;
+function j(t) {
+  return t === void 0 ? "undefined" : t === null || typeof t != "object" ? JSON.stringify(t) : Array.isArray(t) ? `[${t.map(j).join(",")}]` : `{${Object.keys(t).sort().map((r) => `${JSON.stringify(r)}:${j(t[r])}`).join(",")}}`;
 }
 function He(t) {
   let e = 5381;
@@ -247,7 +247,7 @@ function He(t) {
   return (e >>> 0).toString(36);
 }
 function Ke(t) {
-  return `hds-sx-${He(z(t))}`;
+  return `hds-sx-${He(j(t))}`;
 }
 const U = /* @__PURE__ */ new Set();
 let T = null;
@@ -273,7 +273,7 @@ function Xt(t) {
   return e;
 }
 const Ue = /* @__PURE__ */ E(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md transition-[colors,filter] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:bg-muted disabled:text-[var(--semantic-color-content-disabled)] active:inset-shadow-[0_0_0_9999px] active:inset-shadow-pressed-overlay/5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md transition-[colors,filter] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:bg-[var(--component-button-primary-bgDisabled)] disabled:text-[var(--component-button-primary-textDisabled)] active:inset-shadow-[0_0_0_9999px] active:inset-shadow-pressed-overlay/5 [&_svg]:pointer-events-none [&_svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -307,9 +307,9 @@ const Ue = /* @__PURE__ */ E(
         info: "border-transparent bg-feedback-bg-info text-feedback-info hover:bg-feedback-bg-info hover:border-transparent hover:brightness-95 dark:hover:brightness-110"
       },
       size: {
-        sm: "h-8 px-3 hds-type-caption [&_svg]:size-3.5",
-        md: "h-10 px-4 py-2 hds-type-ui [&_svg]:size-4",
-        lg: "h-12 px-6 hds-type-ui [&_svg]:size-5"
+        sm: "h-8 px-3 hds-type-caption [&_svg]:size-[var(--component-button-size-sm-iconSize)]",
+        md: "h-10 px-4 py-2 hds-type-ui [&_svg]:size-[var(--component-button-size-md-iconSize)]",
+        lg: "h-12 px-6 hds-type-ui [&_svg]:size-[var(--component-button-size-lg-iconSize)]"
       },
       iconOnly: {
         true: "p-0",
@@ -1171,7 +1171,7 @@ const Tt = A.Trigger, ie = /* @__PURE__ */ se(A.Portal), _t = A.Action, Pt = A.C
   );
 }), Lt = /* @__PURE__ */ h.forwardRef(function({ className: e, children: r, ...n }, a) {
   return /* @__PURE__ */ s(A.Title, { asChild: !0, children: /* @__PURE__ */ s(I, { ref: a, as: "h2", variant: "title", className: e, ...n, children: r }) });
-}), jt = /* @__PURE__ */ h.forwardRef(function({ className: e, children: r, ...n }, a) {
+}), zt = /* @__PURE__ */ h.forwardRef(function({ className: e, children: r, ...n }, a) {
   return /* @__PURE__ */ s(A.Description, { asChild: !0, children: /* @__PURE__ */ s(
     I,
     {
@@ -1191,7 +1191,7 @@ const Tt = A.Trigger, ie = /* @__PURE__ */ se(A.Portal), _t = A.Action, Pt = A.C
   Header: $t,
   Footer: It,
   Title: Lt,
-  Description: jt,
+  Description: zt,
   Action: _t,
   Cancel: Pt,
   // Set here, not by a later `AlertDialog.displayName = …` write: a top-level