@hirobius/design-system 0.23.1 → 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,23 @@
 # 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

package/README.md

@@ -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-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
 
 <!-- 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.
@@ -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,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.
@@ -239,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
 

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.23.2. For newer releases, run `npx @hirobius/design-system@latest upgrade`: it always fetches the newest steps.
 
 ## How to upgrade
 
@@ -10,6 +10,15 @@ 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.

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