@hirobius/design-system 0.15.0 → 0.17.0

package/README.md

@@ -1,20 +1,20 @@
 # Hirobius Design System
 
-A publishable React + TypeScript component library backed by a governed design-token pipeline, published to npm as `@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)
 
-<!--
-  PLACEHOLDER — ADRIAN TO WRITE (hds front-door PR).
-  If you want the README to mention the July–September 2026 pause, put one or
-  two sentences here in your own words, then delete this comment. Leaving the
-  comment in place publishes nothing. Do not restore the old status line this
-  PR removed: CI, release, and Chromatic triggers were restored in #204.
--->
+React + TypeScript component library on a governed design-token pipeline. Live Storybook: **<https://hirobius-design-system.vercel.app>**
+
+```bash
+pnpm add @hirobius/design-system
+```
+
+[![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)
 
 <!-- auto:start:front-door-counts -->
 
-- **108** public component modules, exported from `src/index.ts`
-- **362** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
-- **447** Storybook stories in **113** story files, reviewed visually in Chromatic
+- **109** public component modules, exported from `src/index.ts`
+- **379** DTCG tokens in `hirobius.tokens.json`, compiled to CSS variables and TypeScript constants
+- **455** Storybook stories in **115** story files
 
 <!-- auto:end:front-door-counts -->
 
@@ -125,7 +125,7 @@ Core verification commands:
 ```bash
 pnpm typecheck
 pnpm lint
-pnpm exec vitest run   # unit + contract tests, as the pre-push hook and CI run them
+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
@@ -147,62 +147,18 @@ Source-of-truth files:
 - `DESIGN.md` — lean visual spec for agents and engineers.
 - `DESIGN-HANDOFF.md` — verbose visual mirror for handoff and review.
 
-<!-- design-links:start (generated by `pnpm figma:links`; edit the @figma JSDoc tag, not this section) -->
-
-## Design ↔ Code links
-
-Each component has one Figma source: `figmaUrl` in `public/hds-manifest.json`, which `pnpm manifest:generate` sets from the `@figma` tag in the component JSDoc. `pnpm figma:links` keeps this table current and Storybook reads the same field (`parameters.design`). The Figma-side links (dev resources and component descriptions) exist only once someone runs their steps in [`figma/README.md`](figma/README.md).
-
-**44 of 139** components link a Figma node.
-
-| Component          | Figma node                                                                                         | Story                                                                      | Source                                                            |
-| ------------------ | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------- | ----------------------------------------------------------------- |
-| `Alert`            | [33:34](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34)   | [alert.stories.tsx](src/stories/alert.stories.tsx)                         | [alert.tsx](src/app/components/alert.tsx)                         |
-| `Avatar`           | [34:18](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18)   | [avatar.stories.tsx](src/stories/avatar.stories.tsx)                       | [avatar.tsx](src/app/components/avatar.tsx)                       |
-| `Badge`            | [31:15](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15)   | [badge.stories.tsx](src/stories/badge.stories.tsx)                         | [badge.tsx](src/app/components/badge.tsx)                         |
-| `Breadcrumb`       | [86:159](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159) | [breadcrumb.stories.tsx](src/stories/breadcrumb.stories.tsx)               | [breadcrumb.tsx](src/app/components/breadcrumb.tsx)               |
-| `Button`           | [28:138](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138) | [button.stories.tsx](src/stories/button.stories.tsx)                       | [button.tsx](src/app/components/button.tsx)                       |
-| `Callout`          | [88:85](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85)   | [callout.stories.tsx](src/stories/callout.stories.tsx)                     | [callout.tsx](src/app/components/callout.tsx)                     |
-| `Card`             | [39:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11)   | [card.stories.tsx](src/stories/card.stories.tsx)                           | [card.tsx](src/app/components/card.tsx)                           |
-| `CodeBlock`        | [89:154](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154) | [code-block.stories.tsx](src/stories/code-block.stories.tsx)               | [code-block.tsx](src/app/components/code-block.tsx)               |
-| `Combobox`         | [82:237](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237) | [combobox.stories.tsx](src/stories/combobox.stories.tsx)                   | [combobox.tsx](src/app/components/combobox.tsx)                   |
-| `Dialog`           | [93:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27)   | [dialog.stories.tsx](src/stories/dialog.stories.tsx)                       | [dialog.tsx](src/app/components/dialog.tsx)                       |
-| `Disclosure`       | [88:453](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453) | [disclosure.stories.tsx](src/stories/disclosure.stories.tsx)               | [disclosure.tsx](src/app/components/disclosure.tsx)               |
-| `Divider`          | [89:26](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26)   | [divider.stories.tsx](src/stories/divider.stories.tsx)                     | [divider.tsx](src/app/components/divider.tsx)                     |
-| `EmptyState`       | [88:352](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352) | [empty-state.stories.tsx](src/stories/empty-state.stories.tsx)             | [empty-state.tsx](src/app/components/empty-state.tsx)             |
-| `Field`            | [85:81](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81)   | [field.stories.tsx](src/stories/field.stories.tsx)                         | [field.tsx](src/app/components/field.tsx)                         |
-| `Form`             | [85:94](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94)   | [form.stories.tsx](src/stories/form.stories.tsx)                           | [form.tsx](src/app/components/form.tsx)                           |
-| `HdsCheckbox`      | [35:29](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29)   | [checkbox.stories.tsx](src/stories/checkbox.stories.tsx)                   | [checkbox.tsx](src/app/components/checkbox.tsx)                   |
-| `HdsRadio`         | [36:17](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17)   | [radio.stories.tsx](src/stories/radio.stories.tsx)                         | [radio.tsx](src/app/components/radio.tsx)                         |
-| `HdsSelect`        | [82:49](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49)   | [select.stories.tsx](src/stories/select.stories.tsx)                       | [select.tsx](src/app/components/select.tsx)                       |
-| `HdsSlider`        | [82:265](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265) | [slider.stories.tsx](src/stories/slider.stories.tsx)                       | [slider.tsx](src/app/components/slider.tsx)                       |
-| `HdsToggle`        | [37:19](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19)   | [toggle.stories.tsx](src/stories/toggle.stories.tsx)                       | [toggle.tsx](src/app/components/toggle.tsx)                       |
-| `IconButton`       | [40:39](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=40-39)   | [icon-button.stories.tsx](src/stories/icon-button.stories.tsx)             | [icon-button.tsx](src/app/components/icon-button.tsx)             |
-| `InlineCode`       | [89:155](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-155) | [inline-code.stories.tsx](src/stories/inline-code.stories.tsx)             | [inline-code.tsx](src/app/components/inline-code.tsx)             |
-| `InlineLink`       | [89:161](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161) | [inline-link.stories.tsx](src/stories/inline-link.stories.tsx)             | [inline-link.tsx](src/app/components/inline-link.tsx)             |
-| `Input`            | [38:20](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20)   | [input.stories.tsx](src/stories/input.stories.tsx)                         | [input.tsx](src/app/components/input.tsx)                         |
-| `Menu`             | [93:59](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59)   | [menu.stories.tsx](src/stories/menu.stories.tsx)                           | [menu.tsx](src/app/components/menu.tsx)                           |
-| `NavGroup`         | [86:304](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-304) | [nav-group.stories.tsx](src/stories/nav-group.stories.tsx)                 | [nav-group.tsx](src/app/components/nav-group.tsx)                 |
-| `NavItem`          | [86:258](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-258) | [nav-item.stories.tsx](src/stories/nav-item.stories.tsx)                   | [nav-item.tsx](src/app/components/nav-item.tsx)                   |
-| `Pagination`       | [86:194](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194) | [pagination.stories.tsx](src/stories/pagination.stories.tsx)               | [pagination.tsx](src/app/components/pagination.tsx)               |
-| `Popover`          | [93:32](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32)   | [popover.stories.tsx](src/stories/popover.stories.tsx)                     | [popover.tsx](src/app/components/popover.tsx)                     |
-| `Progress`         | [88:91](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91)   | [progress.stories.tsx](src/stories/progress.stories.tsx)                   | [progress.tsx](src/app/components/progress.tsx)                   |
-| `SegmentedControl` | [82:334](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-334) | [segmented-control.stories.tsx](src/stories/segmented-control.stories.tsx) | [segmented-control.tsx](src/app/components/segmented-control.tsx) |
-| `SideNav`          | [86:332](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-332) | [side-nav.stories.tsx](src/stories/side-nav.stories.tsx)                   | [side-nav.tsx](src/app/components/side-nav.tsx)                   |
-| `Skeleton`         | [88:95](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95)   | [skeleton.stories.tsx](src/stories/skeleton.stories.tsx)                   | [skeleton.tsx](src/app/components/skeleton.tsx)                   |
-| `Spinner`          | [88:106](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106) | [spinner.stories.tsx](src/stories/spinner.stories.tsx)                     | [spinner.tsx](src/app/components/spinner.tsx)                     |
-| `Stat`             | [88:247](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-247) | [stat.stories.tsx](src/stories/stat.stories.tsx)                           | [stat.tsx](src/app/components/stat.tsx)                           |
-| `StatusListItem`   | [88:350](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-350) | [status-list-item.stories.tsx](src/stories/status-list-item.stories.tsx)   | [status-list-item.tsx](src/app/components/status-list-item.tsx)   |
-| `StatusTile`       | [88:292](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292) | [status-tile.stories.tsx](src/stories/status-tile.stories.tsx)             | [status-tile.tsx](src/app/components/status-tile.tsx)             |
-| `StepperField`     | [82:425](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-425) | [stepper-field.stories.tsx](src/stories/stepper-field.stories.tsx)         | [stepper-field.tsx](src/app/components/stepper-field.tsx)         |
-| `Surface`          | [89:27](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-27)   | [surface.stories.tsx](src/stories/surface.stories.tsx)                     | [surface.tsx](src/app/components/surface.tsx)                     |
-| `Table`            | [89:300](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300) | [table.stories.tsx](src/stories/table.stories.tsx)                         | [table.tsx](src/app/components/table.tsx)                         |
-| `Tabs`             | [86:89](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89)   | [tabs.stories.tsx](src/stories/tabs.stories.tsx)                           | [tabs.tsx](src/app/components/tabs.tsx)                           |
-| `Tag`              | [32:11](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=32-11)   | [tag.stories.tsx](src/stories/tag.stories.tsx)                             | [tag.tsx](src/app/components/tag.tsx)                             |
-| `Textarea`         | [85:14](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-14)   | [textarea.stories.tsx](src/stories/textarea.stories.tsx)                   | [textarea.tsx](src/app/components/textarea.tsx)                   |
-| `ToastProvider`    | [93:367](https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-367) | [toast.stories.tsx](src/stories/toast.stories.tsx)                         | [toast.tsx](src/app/components/toast.tsx)                         |
-
-<!-- design-links:end -->
+Component-by-component Figma links live in [docs/DESIGN_LINKS.md](docs/DESIGN_LINKS.md), generated by `pnpm figma:links`.
+
+## Accessibility
+
+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 the agent gate and on demand, not in the main CI workflow, and currently reports 1 violation (`src/app/components/asset-img.tsx`).
+- **Storybook:** the `addon-a11y` panel shows axe results for each story while you review it. It reports; it does not gate.
+
+There is no automated screen-reader testing.
 
 ## Visual direction: Editorial Enterprise
 
@@ -218,9 +174,9 @@ 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-push** (`.husky/pre-push`): Vitest unit and contract tests, then the consumer smoke build (library build, subpath resolution, publint, consumer typecheck).
+- **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, and Chromatic (`.github/workflows/chromatic.yml`) runs it on pull requests. The earlier browser test suite drove a docs site that no longer exists; it is archived in `tests-archive/`.
+- **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).
 
 `CLAUDE.md` is the operating contract for agents working in this repo.
 

package/dist/chunks/LanguageContext-CH_bwzCq.js

@@ -0,0 +1,83 @@
+'use client';
+import { jsx as r } from "react/jsx-runtime";
+import { useContext as c, createContext as s, forwardRef as p, useState as v, useEffect as w, useCallback as u } from "react";
+const l = s(null);
+function E({ state: e, children: t }) {
+  return /* @__PURE__ */ r(l.Provider, { value: e, children: t });
+}
+function S() {
+  return c(l);
+}
+const x = p(
+  function({ to: t, children: n, ...i }, a) {
+    return /* @__PURE__ */ r("a", { ref: a, href: t, ...i, children: n });
+  }
+), d = s(null);
+function A({ adapter: e, children: t }) {
+  return /* @__PURE__ */ r(d.Provider, { value: e, children: t });
+}
+function P() {
+  const e = c(d);
+  return e || {
+    navigate: (t) => {
+      typeof window < "u" && window.location.assign(t);
+    },
+    currentPath: typeof window < "u" ? window.location.pathname : "/",
+    LinkComponent: x
+  };
+}
+const g = {
+  en: {
+    language: "en",
+    dir: "ltr",
+    label: "English",
+    nativeLabel: "English"
+  }
+}, f = s({
+  language: "en",
+  direction: "ltr",
+  isRtl: !1,
+  setLanguage: () => {
+  },
+  setDirection: () => {
+  },
+  toggleDirection: () => {
+  },
+  options: g
+});
+function b() {
+  try {
+    const e = localStorage.getItem("hds-direction");
+    if (e === "ltr" || e === "rtl") return e;
+  } catch {
+  }
+  return "ltr";
+}
+function R({ children: e }) {
+  const [t, n] = v(b), i = "en", a = t === "rtl";
+  w(() => {
+    try {
+      localStorage.setItem("hds-direction", t);
+    } catch {
+    }
+    document.documentElement.setAttribute("lang", "en"), document.documentElement.setAttribute("data-language", "en"), document.documentElement.setAttribute("dir", t), document.documentElement.setAttribute("data-reading-direction", t);
+  }, [t]);
+  const m = u((o) => {
+  }, []), L = u((o) => {
+    n(o);
+  }, []), h = u(() => {
+    n((o) => o === "ltr" ? "rtl" : "ltr");
+  }, []);
+  return /* @__PURE__ */ r(f.Provider, { value: { language: i, direction: t, isRtl: a, setLanguage: m, setDirection: L, toggleDirection: h, options: g }, children: e });
+}
+function H() {
+  return c(f);
+}
+export {
+  E as F,
+  A as H,
+  R as L,
+  P as a,
+  H as b,
+  S as u
+};

package/dist/chunks/TokenDisplayContext-evZi_214.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as r } from "react/jsx-runtime";
+import { useState as i, useContext as a, createContext as u } from "react";
+const o = u(void 0);
+function c({ children: s }) {
+  const [t, e] = i(!1);
+  return /* @__PURE__ */ r(o.Provider, { value: { showCss: t, setShowCss: e, toggleCss: () => e((n) => !n) }, children: s });
+}
+function f() {
+  const s = a(o);
+  return s || { showCss: !1, setShowCss: () => {
+  }, toggleCss: () => {
+  } };
+}
+export {
+  c as T,
+  f as u
+};