@hirobius/design-system 0.23.1 → 0.24.0

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,62 @@
 # Changelog
 
+## 0.24.0
+
+### Upgrade
+
+```sh
+npx @hirobius/design-system@latest upgrade
+```
+
+- Do by hand: The --primitive-color-apple-100 variable is gone; use --primitive-color-graphite-100 for the same accent step.
+- Do by hand: The --primitive-color-apple-200 variable is gone; use --primitive-color-graphite-200 for the same accent step.
+- Do by hand: The --primitive-color-apple-300 variable is gone; use --primitive-color-graphite-300 for the same accent step.
+- Do by hand: The --primitive-color-apple-400 variable is gone; use --primitive-color-graphite-400 for the same accent step.
+- And 31 more: see [UPGRADING.md](https://github.com/hirobius/hds/blob/main/UPGRADING.md#0240).
+
+### Minor Changes
+
+- 72800bc: feat(brand): change the default accent from apple green to graphite (warm charcoal).
+
+  The base brand accent moves from the bright apple green shipped in 0.23.0 to a warm
+  graphite — a full-monochrome accent that reads calmer and more considered. A new
+  `primitive.color.graphite` scale replaces `primitive.color.apple`; feedback hues
+  (`green`/`red`/`amber` for success/danger/warning) are untouched, so the system stays
+  monochrome without flattening its status colors.
+  - `semantic.accent.{rest,hover,pressed,content,contentHover,subtle}`, `semantic.color.surface.accent`/`accentSubtle`, `semantic.color.content.accent`, and `semantic.color.border.accent` now resolve through `primitive.color.graphite.*`.
+  - The accent **inverts per theme** so fills never vanish on a dark page: a dark graphite step in light mode (near-white on-accent text) and a light warm-grey step in dark mode (dark on-accent text). `semantic.color.content.onAccent` flips to `neutral.50` in light mode and `graphite.900` in dark mode — `content.onAccent / surface.accent` is 10.5:1 light / 10.0:1 dark.
+  - Per-tenant accents are unchanged: `accent-lilac` and `concrete-creations` set their own accent (and their own `onAccent`); `brutalist-demo` inherits the new graphite base.
+
+  The `--primitive-color-apple-*` CSS variables (introduced in 0.23.0) are removed in favor of `--primitive-color-graphite-*`; consumers who referenced a raw accent primitive should repoint to the graphite scale, though the semantic accent tokens are the intended surface and the per-tenant accent knob is unchanged — set your own accent overlay to override the base.
+
+### Patch Changes
+
+- 72800bc: fix(theming): the font dial now works.
+
+  Setting `--hds-font-family` / `--hds-font-family-mono` (or `<HdsThemeProvider fontFamily fontFamilyMono>`) used to change nothing: the type roles were resolved once on `:root`, so descendants inherited the default stack. They are now re-declared on each element of the `[data-hds]` subtree, so the dial applies at whatever scope you set it — headings, body, UI text, captions, code, and the JS style objects (`hds.fontFamily`, `hds.typeStyles`) all follow it. With no override, nothing changes: the default is still the brand typeface.
+
+- 72800bc: feat(tokens): add a reserved mauve primitive scale.
+
+  `primitive.color.mauve.{50…950}` (anchor `#734B5E` at 500) is added alongside graphite, lightness-matched to it step for step. Nothing maps to it yet: graphite stays the brand accent, and no semantic or component token reads mauve. It is available as `--primitive-color-mauve-*` for exploration.
+
+## 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

package/DESIGN.md

@@ -6,14 +6,14 @@ A machine- and human-readable specification of the Hirobius Design System for AI
 
 ## Overview
 
-Hirobius is a clean, systems-first visual language that bridges digital precision and physical fabrication through a high-contrast monochromatic neutral palette and a single accent that each tenant sets — a bright apple green by default. Its personality is disciplined, tactile, and quietly technical: structure is explicit, motion is purposeful, and visual noise is stripped away. Whitespace is treated as material, not leftover space, so every screen should feel deliberate, breathable, and exact.
+Hirobius is a clean, structured visual language that bridges digital precision and physical fabrication through a high-contrast monochromatic neutral palette and a single accent that each tenant sets — a warm graphite by default. Its personality is disciplined, tactile, and quietly technical: structure is explicit, motion is purposeful, and visual noise is stripped away. Whitespace is treated as material, not leftover space, so every screen should feel deliberate, breathable, and exact.
 
 ## Colors
 
 <!-- auto:start:colors -->
 **One accent — one neutral system.**
 
-- **Accent** (`#66B239`): CTAs, active states, selected focus rings, and the single brand accent. `semantic.accent.rest` — a per-tenant knob, not a fixed hue (#208).
+- **Accent** (`#433A3F`): CTAs, active states, selected focus rings, and the single brand accent. `semantic.accent.rest` — a per-tenant knob, not a fixed hue (#208).
 - **Neutral**: backgrounds, surfaces, borders, text. True monochromatic — `primitive.color.neutral.50` through `950`. Use `semantic.color.surface.*`, `semantic.color.content.*`, `semantic.color.border.*`; never reach directly for primitives in components.
 - **Feedback — Error** (`#B91C1C`): destructive confirms, error banners, validation failures. `semantic.color.feedback.error`.
 - **Feedback — Success** (`#047857`): positive confirmations, completed states. `semantic.color.feedback.success`.
@@ -26,10 +26,9 @@ Feedback hues are never decorative; do not use them as accents. Light and dark m
 ## Typography
 
 <!-- auto:start:typography -->
-HDS ships three typefaces — each with a distinct and exclusive role:
+HDS ships two typefaces:
 
-- **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.
+- **Text font**: Plus Jakarta Sans. Headings, prose, labels, captions, and UI copy; the type roles set size and weight.
 - **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.
@@ -65,7 +64,7 @@ Layout rhythm, padding, and gaps use the `semantic.space.scale.{xs…xl}` steps
 
 ## Layout contract (v1)
 
-Approved 2026-10-07. Data: `docs/guardrails/layout-contract.json`; gates: `pnpm check:layout-contract` and `pnpm check:spacing-scale` (warn mode; baseline in `docs/audits/layout-contract-baseline.md`).
+Approved 2026-10-07 as the **target**; adoption is in progress, so some components below (Container, Sidebar, Switcher) still ship until they fold in. Data: `docs/guardrails/layout-contract.json`; gates: `pnpm check:layout-contract` and `pnpm check:spacing-scale` (warn mode; baseline in `docs/audits/layout-contract-baseline.md`).
 
 1. **Sizing.** Every component declares `fill` or `hug` on each axis. Leaves hug. Input, Textarea, Select, Combobox, Table, Progress and Divider fill width. One override prop, `width="hug|fill"`, on every component. Height always hugs; stretching is the parent's job (`align="stretch"`). No component sets `h-full`, `height: 100%` or `self-*` on its root.
 2. **Padding.** Only containers pad: Card, Surface, Alert, Callout, Dialog, Page. Compound parts (`Card.Header`, `Body`, `Footer`, `Metric`) have zero padding and the container's `gap` spaces them. Padding is `none | sm | md`, default `md`, density-aware. A padded container directly inside a padded container is an error unless the inner one is `padding="none"`.
@@ -209,7 +208,7 @@ Three more needs are props on an existing component, not components of their own
 ## Do's and Don'ts
 
 - Don't invent new corner behavior for interactive controls; buttons, inputs, disclosures, and similar action surfaces should follow the shared action radius (`semantic.radius.action`).
-- Don't introduce additional accent hues; Hirobius uses exactly one accent, resolved from `semantic.accent.rest`, over a true monochromatic neutral system. The accent is a per-tenant knob (#208) and defaults to a bright apple green — read the token, never assume a hue.
+- Don't introduce additional accent hues; Hirobius uses exactly one accent, resolved from `semantic.accent.rest`, over a true monochromatic neutral system. The accent is a per-tenant knob and defaults to a warm graphite — read the token, never assume a hue.
 - Don't tint neutrals warm or cool; greys should remain genuinely neutral and high-contrast.
 - Don't reach for shadow values directly — bind to a `semantic.elevation.*` role so surface + shadow + border stay paired. Cards default to `flat` (border, no shadow). Popovers/tooltips/dropdowns use `floating`. Dialogs/sheets use `overlay`.
 - Don't hardcode colors, spacing, radius, or typography values when governed tokens already exist.
@@ -223,11 +222,11 @@ Three more needs are props on an existing component, not components of their own
 
 ## Open Questions
 
-Unresolved rules that the live repo cannot yet answer confidently are tracked in [`OPEN_DS_QUESTIONS.md`](OPEN_DS_QUESTIONS.md). Do not invent rules here to fill those gaps.
+Unresolved rules that the live repo cannot yet answer confidently are tracked as GitHub issues. Do not invent rules here to fill those gaps.
 
 <!-- auto:start:build-meta -->
 ---
 
-> Generated from `hirobius.tokens.json` (400 tokens) and `public/hds-manifest.json` by `scripts/build-design-md.mjs`.
+> Generated from `hirobius.tokens.json` (411 tokens) and `public/hds-manifest.json` by `scripts/build-design-md.mjs`.
 > Hand-edit `DESIGN.source.md`; this file (`DESIGN.md`) is overwritten by `pnpm tokens`.
 <!-- auto:end:build-meta -->

package/README.md

@@ -13,46 +13,47 @@ 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-hds-components.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
+- **411** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
 
 <!-- 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, and a consumer smoke build run in git hooks and CI; bundle budgets and a docs-site accessibility (axe) gate run in 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.
 
 The counts are generated from source by `pnpm readme:counts`, which `pnpm tokens` also runs. `scripts/__tests__/front-door.test.mjs` fails if this README claims more than the source has.
 
+**How it's built:** [How HDS is engineered](docs/ENGINEERING.md) walks the token pipeline, the quality gates (and how they're proven to fire), testing, release and upgrade, and Figma sync.
+
 Agents: install the consumer skill with `npx skills add hirobius/hds --skill hds-consumer` (see `docs/CONSUMING.md`, "Agent skill").
 
 ## In use
 
 <!-- auto:start:consumer-usage -->
 
-The Ops dashboard (`hirobius/ops`) is the only product app that uses components: **33** of its source files import from `@hirobius/design-system`, using **25** distinct components. The two screenshots below are Ops pages rendered from its `main` (measured at commit `76ef65e`).
+An internal operations dashboard is the only product app that uses components: **33** of its source files import from `@hirobius/design-system`, using **25** distinct components. The two screenshots below are pages of that app, rendered from its `main` branch.
 
 | Consumer kind     | Count | How it uses HDS                           |
 | ----------------- | ----- | ----------------------------------------- |
 | Product apps      | 1     | Components and tokens                     |
 | Token-level sites | 4     | Tokens and CSS only, no component imports |
 
-[![Ops library page](docs/images/ops-library.png)](docs/images/ops-library.png)
+[![Library page of the product app](docs/images/product-app-library.png)](docs/images/product-app-library.png)
 
-[![Ops fleet audit page](docs/images/ops-fleet-audit.png)](docs/images/ops-fleet-audit.png)
+[![Audit page of the product app](docs/images/product-app-audit.png)](docs/images/product-app-audit.png)
 
 <!-- auto:end:consumer-usage -->
 
-The numbers come from `pnpm consumer:usage --root <ops checkout>`, which measures that checkout's `src/` and records its commit in `docs/data/consumer-usage.json` (pass `--commit <sha>` when the root is a `git archive` export); without a root it reuses the committed snapshot. A deprecated alias counts as the component it points to (`HdsCheckbox` as `Checkbox`). The components that Ops's page- and video-clone prompts tell generated code to import are listed there as `promptContracts` and are not counted here. `scripts/__tests__/consumer-usage.test.mjs` fails if this section drifts from that snapshot. The product-app and token-level-site split is a declared figure in that file, not a measurement. It was confirmed on 2026-10-01 (hds#389: there is no second product app), so `consumersConfirmed` there is true and the table above shows it.
+The numbers come from `pnpm consumer:usage --root <consumer checkout>`, which measures that checkout's `src/` and records its commit in `docs/data/consumer-usage.json` (pass `--commit <sha>` when the root is a `git archive` export); without a root it reuses the committed snapshot. A deprecated alias counts as the component it points to (`HdsCheckbox` as `Checkbox`). The components that the app's page- and video-clone prompts tell generated code to import are listed there as `promptContracts` and are not counted here. `scripts/__tests__/consumer-usage.test.mjs` fails if this section drifts from that snapshot. The product-app and token-level-site split is a declared figure in that file, not a measurement. It was confirmed on 2026-10-01 (there is no second product app), so `consumersConfirmed` there is true and the table above shows it.
 
 ## What belongs in the system
 
@@ -178,7 +179,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 +190,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 +220,6 @@ 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.
@@ -237,10 +237,10 @@ The governing direction is "Editorial Enterprise" — enterprise rigor with edit
 
 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-commit** (`.husky/pre-commit`): secrets scan (when `gitleaks` is installed locally; not yet in CI), 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
 
@@ -265,18 +265,26 @@ Releases are cut with [Changesets](https://github.com/changesets/changesets). A
 ```text
 src/
   app/
-    components/
-    layouts/
-    pages/
-  styles/
-scripts/
-docs/
-public/
+    components/     the components
+    context/        theme provider
+    design-system/  generated token constants
+  styles/           tokens.css, theme.css, generated CSS
+  brand/ form/ mui/ scroll/   subpath entry points
+hirobius.tokens.json  the single token source
+scripts/            generators and gates
+codemods/           the upgrade command and its codemods
+mcp/                the MCP server shipped in the package
+docs-site/          the documentation site
+content/            docs-site pages
+eval/               agent-consistency eval
+docs/               ADRs, ENGINEERING.md, guardrail registry
+public/             manifest, llms.txt
 ```
 
 ## Primary docs
 
 - [`docs/CONSUMING.md`](docs/CONSUMING.md) — installing & using the published package
+- [`docs/ENGINEERING.md`](docs/ENGINEERING.md) — how the system is built (pipeline, gates, release, Figma sync)
 - `CLAUDE.md` — agent operating contract
 - `DESIGN.md` — lean visual spec
 - `DESIGN-HANDOFF.md` — verbose visual mirror

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.1. 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.24.0. For newer releases, run `npx @hirobius/design-system@latest upgrade`: it always fetches the newest steps.
 
 ## How to upgrade
 
@@ -10,6 +10,60 @@ 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.24.0
+
+Released 2026-10-12 (minor). 11 changes to make by hand (11 breaking) and 24 that look different.
+
+### Looks different
+
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the code-font dial (--hds-font-family-mono) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- Accent-intent text and icons (such as links) now render in graphite instead of a dark apple green.
+- Hovered accent text now shifts within the graphite scale instead of toward a darker apple green.
+- The accent fill on hover is now a deeper graphite (light mode) or lighter warm-grey (dark mode) instead of a green.
+- The accent fill while pressed is now a darker graphite (light mode) or lighter warm-grey (dark mode) instead of a green.
+- Interactive accent fills at rest (primary buttons, selected controls) now render in warm graphite — a dark fill in light mode and a light warm-grey fill in dark mode — instead of a bright apple green.
+- The low-emphasis accent tint (hover and selection backgrounds) is now a faint graphite tint instead of a faint apple green.
+- Accent borders now render in graphite instead of apple green.
+- Accent-intent text and icons on page and card surfaces now render in graphite instead of a dark apple green.
+- Text and icons on accent fills are now near-white in light mode and dark graphite in dark mode (the fill inverts per theme), instead of a dark neutral in both modes.
+- Accent background surfaces now render in warm graphite that inverts per theme instead of a bright apple green.
+- Faint accent background surfaces are now a pale graphite tint instead of a pale apple green.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the code-font dial (--hds-font-family-mono) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+- This variable now follows the font dial (--hds-font-family) at any scope; if you overrode it directly, override the dial instead.
+
+### Do by hand
+
+- The --primitive-color-apple-100 variable is gone; use --primitive-color-graphite-100 for the same accent step.
+- The --primitive-color-apple-200 variable is gone; use --primitive-color-graphite-200 for the same accent step.
+- The --primitive-color-apple-300 variable is gone; use --primitive-color-graphite-300 for the same accent step.
+- The --primitive-color-apple-400 variable is gone; use --primitive-color-graphite-400 for the same accent step.
+- The --primitive-color-apple-50 variable is gone; use --primitive-color-graphite-50 for the same lightest accent step.
+- The --primitive-color-apple-500 variable is gone; use --primitive-color-graphite-500 (or a semantic accent token) instead.
+- The --primitive-color-apple-600 variable is gone; use --primitive-color-graphite-600 for the same accent step.
+- The --primitive-color-apple-700 variable is gone; use --primitive-color-graphite-700 for the rest accent step.
+- The --primitive-color-apple-800 variable is gone; use --primitive-color-graphite-800 for the same accent step.
+- The --primitive-color-apple-900 variable is gone; use --primitive-color-graphite-900 for the same accent step.
+- The --primitive-color-apple-950 variable is gone; use --primitive-color-graphite-950 for the darkest accent step.
+
+## 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.

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