@hirobius/design-system 0.19.1 → 0.20.0

package/dist/types/src/index.d.ts

@@ -1,5 +1,4 @@
 export * from './app/components/alert.js';
-export * from './app/components/asset-img.js';
 export * from './app/components/avatar.js';
 export * from './app/components/badge.js';
 export * from './app/components/box.js';
@@ -9,19 +8,13 @@ export * from './app/components/field.js';
 export * from './app/components/stat.js';
 export * from './app/components/status-list-item.js';
 export * from './app/components/card.js';
-export * from './app/components/cinematic-link.js';
-export * from './app/components/code-block.js';
-export * from './app/components/component-instance-matrix.js';
 export * from './app/components/container.js';
 export * from './app/components/dialog.js';
 export * from './app/components/divider.js';
 export * from './app/components/menu.js';
 export * from './app/components/popover.js';
 export * from './app/components/hds-tooltip.js';
-export * from './app/components/doc-link-card.js';
 export * from './app/components/grid.js';
-export * from './app/components/heading-stack.js';
-export * from './app/components/history-card.js';
 export * from './app/components/icon.js';
 export * from './app/components/inline-code.js';
 export * from './app/components/inline-link.js';
@@ -31,7 +24,6 @@ export * from './app/components/checkbox.js';
 export * from './app/components/radio.js';
 export * from './app/components/slider.js';
 export * from './app/components/toggle.js';
-export * from './app/components/nav-item.js';
 export * from './app/components/progress.js';
 export * from './app/components/skeleton.js';
 export * from './app/components/spinner.js';
@@ -42,74 +34,24 @@ export * from './app/components/surface.js';
 export * from './app/components/table.js';
 export * from './app/components/tag.js';
 export * from './app/components/text.js';
-export * from './app/components/token.js';
 export * from './app/components/kbd.js';
 export * from './app/components/status-dot.js';
 export * from './app/components/timestamp.js';
 export * from './app/components/blockquote.js';
 export * from './app/components/visually-hidden.js';
 export * from './app/components/avatar-group.js';
-export * from './app/components/button-group.js';
-export * from './app/components/input-group.js';
-export * from './app/components/circular-progress.js';
-export * from './app/components/toggle-button.js';
-export * from './app/components/aspect-ratio.js';
 export * from './app/components/alert-dialog.js';
-export * from './app/components/hover-card.js';
-export * from './app/components/context-menu.js';
-export * from './app/components/side-nav.js';
-export * from './app/components/command-palette.js';
-export * from './app/components/image-lightbox.js';
 export * from './app/components/metadata-list.js';
-export * from './app/components/overflow-list.js';
-export * from './app/components/top-nav.js';
-export * from './app/components/app-shell.js';
-export * from './app/components/selectable-card.js';
-export * from './app/components/tokenizer.js';
-export * from './app/components/file-input.js';
-export * from './app/components/multi-selector.js';
-export * from './app/components/toolbar.js';
-export * from './app/components/tree-list.js';
-export * from './app/components/stepper.js';
-export * from './app/components/carousel.js';
-export * from './app/components/calendar.js';
-export * from './app/components/time-input.js';
-export * from './app/components/date-input.js';
-export * from './app/components/date-range-input.js';
-export * from './app/components/date-time-input.js';
-export * from './app/components/cluster.js';
-export * from './app/components/center.js';
 export * from './app/components/sidebar.js';
 export * from './app/components/switcher.js';
-export * from './app/components/cover.js';
-export * from './app/components/frame.js';
-export * from './app/components/bleed.js';
-export * from './app/components/reveal.js';
 export * from './app/components/pin.js';
-export * from './app/components/page.js';
 export * from './app/components/empty-state.js';
-export * from './app/components/error-boundary.js';
-export * from './app/components/not-found-pattern.js';
 export * from './app/components/tabs.js';
-export * from './app/components/tile-grid.js';
-export * from './app/components/status-tile.js';
-export * from './app/components/activity-feed.js';
 export * from './app/components/breadcrumb.js';
 export * from './app/components/combobox.js';
 export * from './app/components/disclosure.js';
-export * from './app/components/form.js';
-export * from './app/components/foundation-swatch.js';
-export * from './app/components/icon-button.js';
-export * from './app/components/nav-group.js';
 export * from './app/components/pagination.js';
-export * from './app/components/sketch.js';
-export * from './app/components/stepper-field.js';
-export * from './app/components/text-lockup.js';
 export * from './app/components/toast.js';
-export * from './app/layouts/CaseStudyLayout.js';
-export * from './app/components/error-pattern.js';
-export * from './app/layouts/HdsSystemDocLayout.js';
-export * from './app/layouts/HdsDocsShell.js';
 export { default as hds } from './app/design-system/tokens.js';
 /** Raw DTCG design tokens (the contents of `hirobius.tokens.json`). */
 export declare const tokens: {
@@ -930,6 +872,14 @@ export declare const tokens: {
                 };
                 $description: string;
             };
+            "120": {
+                $type: string;
+                $value: {
+                    value: number;
+                    unit: string;
+                };
+                $description: string;
+            };
             $description: string;
             interactive: {
                 $description: string;
@@ -1557,6 +1507,22 @@ export declare const tokens: {
                     };
                 };
             };
+            state: {
+                pressed: {
+                    overlay: {
+                        $value: string;
+                        $description: string;
+                        $extensions: {
+                            "com.figma.variables": {
+                                modes: {
+                                    Light: string;
+                                    Dark: string;
+                                };
+                            };
+                        };
+                    };
+                };
+            };
         };
         space: {
             $type: string;
@@ -2117,6 +2083,10 @@ export declare const tokens: {
                 $value: string;
                 $description: string;
             };
+            tile: {
+                $value: string;
+                $description: string;
+            };
             row: {
                 $description: string;
                 compact: {
@@ -2607,6 +2577,11 @@ export declare const tokens: {
             $value: string;
             $description: string;
         };
+        "pressed-overlay": {
+            $type: string;
+            $value: string;
+            $description: string;
+        };
         "popover-foreground": {
             $type: string;
             $value: string;
@@ -2689,69 +2664,3 @@ export { HdsThemeProvider, useHdsTheme } from './app/context/hds-theme.js';
 export type { HdsTheme, HdsDensity, HdsThemeValue, HdsThemeProviderProps, } from './app/context/hds-theme.js';
 export { HdsRouterProvider, useHdsRouter } from './app/context/RouterContext.js';
 export type { HdsRouterAdapter, HdsRouterProviderProps, HdsLinkComponent, HdsLinkProps, HdsNavigateOptions, } from './app/context/RouterContext.js';
-import { ActivityFeed as _ActivityFeed254 } from './app/components/activity-feed.js';
-import { AssetImg as _AssetImg254 } from './app/components/asset-img.js';
-import { Calendar as _Calendar254 } from './app/components/calendar.js';
-import { CodeBlock as _CodeBlock254 } from './app/components/code-block.js';
-import { DocLinkCard as _DocLinkCard254 } from './app/components/doc-link-card.js';
-import { ErrorPattern as _ErrorPattern254 } from './app/components/error-pattern.js';
-import { Lightbox as _Lightbox254 } from './app/components/image-lightbox.js';
-import { NavItem as _NavItem254 } from './app/components/nav-item.js';
-import { Page as _Page254 } from './app/components/page.js';
-import { SideNav as _SideNav254 } from './app/components/side-nav.js';
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const ActivityFeed: typeof _ActivityFeed254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const AppShell: import("react").ForwardRefExoticComponent<import("./app/components/app-shell.js").AppShellProps & import("react").RefAttributes<HTMLDivElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. `ops` is a current importer of this component — its codemod is tracked under hds#124 before this is dropped. */
-export declare const AssetImg: typeof _AssetImg254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Calendar: typeof _Calendar254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Carousel: import("react").ForwardRefExoticComponent<import("./app/components/carousel.js").CarouselProps & import("react").RefAttributes<HTMLElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const CodeBlock: typeof _CodeBlock254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const CommandPalette: import("react").ForwardRefExoticComponent<import("./app/components/command-palette.js").CommandPaletteProps & import("react").RefAttributes<HTMLInputElement>> & {
-    displayName: string;
-};
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const DocLinkCard: typeof _DocLinkCard254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const ErrorPattern: typeof _ErrorPattern254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const FileInput: import("react").ForwardRefExoticComponent<import("./app/components/file-input.js").FileInputProps & import("react").RefAttributes<HTMLInputElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Form: import("react").ForwardRefExoticComponent<import("./app/components/form.js").FormProps & import("react").RefAttributes<HTMLFormElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Lightbox: typeof _Lightbox254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const NavItem: typeof _NavItem254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const OverflowList: import("react").ForwardRefExoticComponent<import("./app/components/overflow-list.js").OverflowListProps & import("react").RefAttributes<HTMLDivElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Page: typeof _Page254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Reveal: import("react").ForwardRefExoticComponent<import("./app/components/reveal.js").RevealProps & import("react").RefAttributes<HTMLDivElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const SideNav: typeof _SideNav254;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Stepper: import("react").ForwardRefExoticComponent<import("./app/components/stepper.js").StepperProps & import("react").RefAttributes<HTMLOListElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const Toolbar: import("./app/components/toolbar.js").ToolbarComponent;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const TopNav: import("react").ForwardRefExoticComponent<import("./app/components/top-nav.js").TopNavProps & import("react").RefAttributes<HTMLElement>>;
-/** @deprecated Import from `@hirobius/design-system/patterns` instead — the root re-export is kept for one minor (hds#254) and removed at the next major once ops has a codemod. */
-export declare const TreeList: import("react").ForwardRefExoticComponent<import("./app/components/tree-list.js").TreeListProps & import("react").RefAttributes<HTMLUListElement>>;
-/** @deprecated Use `Checkbox` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
-export { Checkbox as HdsCheckbox } from './app/components/checkbox.js';
-/** @deprecated Use `Radio` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
-export { Radio as HdsRadio } from './app/components/radio.js';
-/** @deprecated Use `Select` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
-export { Select as HdsSelect } from './app/components/select.js';
-/** @deprecated Use `Slider` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
-export { Slider as HdsSlider } from './app/components/slider.js';
-/** @deprecated Use `Toggle` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
-export { Toggle as HdsToggle } from './app/components/toggle.js';
-/** @deprecated Use `Tooltip` — the `Hds` prefix is dropped to match the rest of the surface. This alias is kept until the 1.0 alias-removal window (hds#254). */
-export { Tooltip as HdsTooltip } from './app/components/hds-tooltip.js';

package/dist/types/src/patterns.d.ts

@@ -1,42 +1,37 @@
 /**
  * @hirobius/design-system/patterns
  *
- * The 22 `pattern`-tier components (hds#254 disposition table, ratified
- * 2026-09-26): composed, higher-level surfaces (nav shells, feeds, rails,
- * pickers) as opposed to the `core` primitives the main barrel is trending
- * toward. Split into their own subpath so a consumer that only needs
+ * The `pattern`-tier modules (hds#254 disposition table, ratified
+ * 2026-09-26): composed, higher-level surfaces (page shells, forms, code
+ * blocks, page sections) as opposed to the `core` primitives the main barrel
+ * is trending toward. Split into their own subpath so a consumer that only needs
  * primitives doesn't pull in this tier's weight.
  *
- * Every one of these is STILL re-exported from the package root today —
- * hds#254 keeps the root re-export for one minor with a `@deprecated` /
- * `@removeIn` notice on each component (see the JSDoc in each module under
- * `src/app/components/`). Prefer importing from here; the root re-export is
- * scheduled for removal at the next major once ops has a codemod (hds#124).
+ * This is the only entry that exports them. Until 0.20.0 the package root
+ * also re-exported 21 of these modules behind `@deprecated` aliases (hds#254);
+ * hds#389 R1 removed those root re-exports, and
+ * `npx -p @hirobius/design-system@^0.20.0 hds-patterns-subpath`
+ * (codemods/patterns-subpath.mjs) moves consumer imports here.
+ *
+ * The same release removed 16 of these modules outright (hds#394 wave 4a, no
+ * survivor): ActivityFeed, AppShell, Calendar, Carousel, CommandPalette,
+ * DocLinkCard, FileInput, Lightbox, NavItem, OverflowList, SideNav,
+ * StackedCardRail, Stepper, Toolbar, TopNav and TreeList. The codemod reports
+ * an import of any of them for a manual edit (codemods/removed-0.20.json).
+ *
+ * StatusTile joined this entry in the same release (hds#389 D5, hds#395): the
+ * root stopped exporting it, and hds-patterns-subpath moves a root import of
+ * StatusTile, StatusTileProps or StatusTileTone here.
  */
-export * from './app/components/calendar.js';
-export * from './app/components/file-input.js';
 export * from './app/components/form.js';
-export * from './app/components/app-shell.js';
-export * from './app/components/overflow-list.js';
 export * from './app/components/page.js';
-export * from './app/components/activity-feed.js';
 export * from './app/components/asset-img.js';
-export * from './app/components/carousel.js';
 export * from './app/components/code-block.js';
-export * from './app/components/stacked-card-rail.js';
-export * from './app/components/doc-link-card.js';
-export * from './app/components/nav-item.js';
-export * from './app/components/side-nav.js';
-export * from './app/components/stepper.js';
-export * from './app/components/top-nav.js';
-export * from './app/components/tree-list.js';
 export * from './app/components/error-pattern.js';
-export * from './app/components/toolbar.js';
-export * from './app/components/command-palette.js';
-export * from './app/components/image-lightbox.js';
 export * from './app/components/reveal.js';
 export * from './app/components/page-header.js';
 export * from './app/components/metric-tiles.js';
 export * from './app/components/form-actions.js';
 export * from './app/components/destructive-section.js';
 export * from './app/components/data-table-section.js';
+export * from './app/components/status-tile.js';

package/dist/variables.css

@@ -156,6 +156,7 @@
   --primitive-size-64: 64px;
   --primitive-size-80: 80px;
   --primitive-size-96: 96px;
+  --primitive-size-120: 120px;
   --primitive-size-interactive-min: 44px;
   --primitive-size-interactive-minCompact: 24px;
   --primitive-size-width-96: 96px;
@@ -227,6 +228,7 @@
   --semantic-color-feedback-bg-warning: var(--primitive-color-amber-50);
   --semantic-color-feedback-bg-info: var(--primitive-color-blue-50);
   --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-50);
+  --semantic-color-state-pressed-overlay: var(--primitive-color-neutral-black);
   --semantic-space-scale-xs: var(--primitive-space-2);
   --semantic-space-scale-sm: var(--primitive-space-4);
   --semantic-space-scale-md: var(--primitive-space-6);
@@ -363,6 +365,7 @@
   --semantic-size-icon-md: var(--primitive-size-20);
   --semantic-size-icon-lg: var(--primitive-size-24);
   --semantic-size-avatar: var(--primitive-size-40);
+  --semantic-size-tile: var(--primitive-size-120);
   --semantic-size-row-compact: var(--primitive-size-40);
   --semantic-size-row-comfortable: var(--primitive-size-48);
   --semantic-zIndex-control: var(--primitive-zIndex-10);
@@ -456,6 +459,7 @@
   --role-card-foreground: var(--semantic-color-content-primary);
   --role-popover: var(--semantic-color-surface-overlay);
   --role-scrim: var(--semantic-color-surface-scrim);
+  --role-pressed-overlay: var(--semantic-color-state-pressed-overlay);
   --role-popover-foreground: var(--semantic-color-content-primary);
   --role-primary: var(--semantic-color-surface-accent);
   --role-primary-foreground: var(--semantic-color-content-onAccent);
@@ -515,6 +519,7 @@
   --semantic-color-feedback-bg-warning: var(--primitive-color-amber-950);
   --semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
   --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-950);
+  --semantic-color-state-pressed-overlay: var(--primitive-color-neutral-white);
   --semantic-accent-rest: var(--primitive-color-neutral-100);
   --semantic-accent-hover: var(--primitive-color-neutral-200);
   --semantic-accent-pressed: var(--primitive-color-neutral-300);
@@ -567,6 +572,7 @@
   --role-card-foreground: var(--semantic-color-content-primary);
   --role-popover: var(--semantic-color-surface-overlay);
   --role-scrim: var(--semantic-color-surface-scrim);
+  --role-pressed-overlay: var(--semantic-color-state-pressed-overlay);
   --role-popover-foreground: var(--semantic-color-content-primary);
   --role-primary: var(--semantic-color-surface-accent);
   --role-primary-foreground: var(--semantic-color-content-onAccent);

package/docs/CONSUMING.md

@@ -101,7 +101,7 @@ Without `data-hds`, components still get their own token-driven styling, but the
 global type baseline and resets won't apply (text falls back to the host font).
 Put `data-hds` as high as makes sense — on `<html>`/`<body>` for an
 HDS-first app, or on a wrapper for a section. Overlays (Dialog, AlertDialog,
-Menu, ContextMenu, Popover, Select, HoverCard, Tooltip) inherit the nearest
+Menu, Popover, Select, Tooltip) inherit the nearest
 `data-hds` scope, so a `<div data-hds data-theme="dark">` themes them too; pass
 `container` on the Content part to portal elsewhere. If the scope element
 creates a containing block or stacking context (`transform`, `filter`, `z-index`,
@@ -213,7 +213,7 @@ export function Example() {
 
 | Import                                  | What you get                                                                                                                  |
 | --------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |
-| `@hirobius/design-system`               | All public components + the router seam (`HdsRouterProvider`, `useHdsRouter`)                                                 |
+| `@hirobius/design-system`               | The core components + the router seam (`HdsRouterProvider`, `useHdsRouter`); the `pattern` tier is in `/patterns`             |
 | `@hirobius/design-system/styles.css`    | Components + utilities + tokens + fonts, NO global reset (host-safe; recommended for embedding)                               |
 | `@hirobius/design-system/tokens.css`    | The complete stylesheet — styles.css PLUS a global Tailwind-preflight reset                                                   |
 | `@hirobius/design-system/variables.css` | Design tokens as CSS custom properties ONLY — no reset/preflight (host-safe)                                                  |
@@ -226,6 +226,8 @@ export function Example() {
 | `@hirobius/design-system/brand`         | Framework-free palette → HDS-semantic overlay bridge for static/SSR targets (see §12)                                         |
 | `@hirobius/design-system/scroll`        | Opt-in scroll-motion: `SmoothScroll` (Lenis) + `useScrollProgress` (Motion). Optional peer `lenis` (see §13)                  |
 | `@hirobius/design-system/static.css`    | CSS-only static-primitive layer — `.hds-badge`/`.hds-card`/`.hds-alert`/`.hds-divider`/`.hds-tag` classes, no React (see §14) |
+| `@hirobius/design-system/patterns`      | The `pattern`-tier components (`Page`, `PageHeader`, `Form`, `FormField`, `CodeBlock`); root copies removed in 0.20.0         |
+| `@hirobius/design-system/icons`         | Curated Lucide icon set for `Icon` and `Button iconOnly` (see §15)                                                            |
 
 ### Semantic feedback / status tokens
 
@@ -287,8 +289,9 @@ import {
 
 ## 8.5 Optional — typed, schema-validated forms (React Hook Form + Zod)
 
-The main barrel is validation-agnostic: `FormField` takes a plain `error`
-string, so you bring your own validation. If you want a batteries-included
+The plain `FormField` (from `@hirobius/design-system/patterns`) is
+validation-agnostic: it takes a plain `error` string, so you bring your own
+validation. If you want a batteries-included
 layer, the `/form` subpath wires [React Hook Form](https://react-hook-form.com)
 to [Zod](https://zod.dev). It's opt-in — `react-hook-form`, `zod`, and
 `@hookform/resolvers` are **optional peer deps**, so they only land in your
@@ -338,7 +341,8 @@ function ApplyForm() {
   validation (no native browser popups racing your schema).
 - `HdsFormField` — a **render-prop**: spread the supplied props onto your
   control. It binds the control to RHF by `name` and shows the field's Zod
-  error through the same label/error/aria markup as the core `FormField`. (It's
+  error through the same label/error/aria markup as the `FormField` in
+  `@hirobius/design-system/patterns`. (It's
   a render-prop, not a cloned child, so RHF's callback ref attaches cleanly.)
 
 **SSR / Astro / Next.js RSC:** this layer is client-only (RHF uses hooks +
@@ -432,7 +436,7 @@ raw hex/px values in `style`, `className`, and `Box` `sx` props before they
 reach code review.
 
 ```bash
-pnpm add -D "@hirobius/eslint-plugin-hds@github:hirobius/hirobius-design-system#path:/scripts/eslint-plugin-hds"
+pnpm add -D "@hirobius/eslint-plugin-hds@github:hirobius/hds#path:/scripts/eslint-plugin-hds"
 ```
 
 ```js
@@ -736,23 +740,27 @@ CSS, only the visual surface of the five primitives above.
 
 ## 15. Icons — the `/icons` subpath
 
-`IconButton` and `Icon` take an `icon` prop. Get one from the curated subpath;
-`lucide-react` does not need to be installed separately.
+`Icon` takes an `icon` prop. Get one from the curated subpath;
+`lucide-react` does not need to be installed separately. An icon-only button is
+`Button iconOnly` with a `label` (its accessible name) and the `Icon` in
+`iconLeft`.
 
 ```tsx
-import { IconButton } from '@hirobius/design-system';
+import { Button, Icon } from '@hirobius/design-system';
 import { Ellipsis } from '@hirobius/design-system/icons';
 
-<IconButton icon={Ellipsis} label="Row actions" />;
+<Button iconOnly label="Row actions" iconLeft={<Icon icon={Ellipsis} />} />;
 ```
 
 The full name list is `iconSet.names` in the manifest (and the Icons section of
 `llms.txt`). Canonical Lucide 0.487.0 names only: `MoreHorizontal` is
 `Ellipsis`, `MoreVertical` is `EllipsisVertical`, `AlertTriangle` is
 `TriangleAlert`, `Home` is `House`, `Filter` is `Funnel`. Icon-only actions (row
-menus, close, edit) use `IconButton`; do not hand-roll a button with a glyph. For
+menus, close, edit) use `Button iconOnly`; do not hand-roll a button with a glyph. For
 an icon outside the set, install `lucide-react@0.487.0` so the `LucideIcon` type
 stays identical.
 
-`Calendar` and `Menu` share names with HDS components; alias them:
-`import { Calendar as CalendarIcon, Menu as MenuIcon } from '@hirobius/design-system/icons'`.
+`Menu` shares its name with the HDS `Menu` component; alias it:
+`import { Menu as MenuIcon } from '@hirobius/design-system/icons'`. (`Calendar`
+collided too until the HDS `Calendar` was removed in 0.20.0, hds#394; it imports
+under its own name now.)

package/hirobius.tokens.json

@@ -830,6 +830,14 @@
         },
         "$description": "96px size step."
       },
+      "120": {
+        "$type": "dimension",
+        "$value": {
+          "value": 120,
+          "unit": "px"
+        },
+        "$description": "120px size step. Backs semantic.size.tile."
+      },
       "$description": "Unaliased dimensional values.",
       "interactive": {
         "$description": "Interactive control size minimums.",
@@ -847,7 +855,7 @@
             "value": 24,
             "unit": "px"
           },
-          "$description": "WCAG 2.2 AA (2.5.8) minimum target size for a compact inline control, such as a tokenizer chip's remove button, where the 44px AAA floor (2.5.5) does not apply."
+          "$description": "Compact inline control target minimum, e.g. a chip's remove button: WCAG 2.2 AA (2.5.8), not the 44px AAA floor (2.5.5)."
         }
       },
       "width": {
@@ -886,7 +894,7 @@
             "value": 280,
             "unit": "px"
           },
-          "$description": "Docs-shell rail width (hds#280). Our own number, not HeroUI's 268px — wide enough for the longest top-level nav label at the default type ramp with room to spare."
+          "$description": "Docs-shell rail width (hds#280): our own number, not HeroUI's 268px; fits the longest top-level nav label with room."
         }
       }
     },
@@ -981,7 +989,7 @@
       "distance": {
         "$type": "dimension",
         "$value": "{primitive.space.6}",
-        "$description": "Travel distance for a scroll-reveal translateY offset. Coincides in value with semantic.space.scale.md today, but names a motion travel distance rather than a spacing tier (hds#242)."
+        "$description": "Scroll-reveal translateY travel distance. Equals semantic.space.scale.md today, but names motion travel, not a spacing tier (hds#242)."
       }
     },
     "color": {
@@ -1456,13 +1464,29 @@
             }
           }
         }
+      },
+      "state": {
+        "pressed": {
+          "overlay": {
+            "$value": "{primitive.color.neutral.black}",
+            "$description": "Opaque pressed wash over a control's own fill: black in light, white in dark. Alpha in the class (inset-shadow-pressed-overlay/5).",
+            "$extensions": {
+              "com.figma.variables": {
+                "modes": {
+                  "Light": "{primitive.color.neutral.black}",
+                  "Dark": "{primitive.color.neutral.white}"
+                }
+              }
+            }
+          }
+        }
       }
     },
     "space": {
       "$type": "dimension",
       "$description": "Semantic spacing tiers: subgrid, component, layout, section, scale.",
       "scale": {
-        "$description": "hds#206 — the canonical spacing vocabulary. One monotonic, single-family t-shirt scale (xs < sm < md < lg < xl) for the `p`/`m`/`gap` family of props on Box/Stack. Supersedes the four un-ordered gap families below (subgrid/component/layout/section) and the 24px alias triplet (layout.normal / layout.gutter / component.padding) for NEW usage; those remain live, deprecated aliases until the consumer codemod (hds#206 remaining work) migrates callers and removes them — not a breaking change yet.",
+        "$description": "hds#206: the canonical spacing vocabulary, one monotonic t-shirt scale (xs to xl) for padding, margin and gap. Supersedes deprecated names.",
         "xs": {
           "$value": "{primitive.space.2}",
           "$description": "8px — smallest step. Same value as component.gap (deprecated alias)."
@@ -1473,7 +1497,7 @@
         },
         "md": {
           "$value": "{primitive.space.6}",
-          "$description": "24px — same value as layout.normal (deprecated alias). Default of the overridable roles surface.padding and region.gutter, which replace the deprecated component.padding / layout.gutter."
+          "$description": "24px. Default of the overridable roles surface.padding and region.gutter. The deprecated layout.normal has the same value."
         },
         "lg": {
           "$value": "{primitive.space.8}",
@@ -1485,17 +1509,17 @@
         }
       },
       "surface": {
-        "$description": "hds#206 — the overridable surface inset. A named role on the t-shirt scale rather than a scale step, because tenants (per brand and density) override it at runtime; its value is always a scale step.",
+        "$description": "hds#206 surface inset role. Tenants override it per brand and density, always with a scale step.",
         "padding": {
           "$value": "{semantic.space.scale.md}",
-          "$description": "24px (scale.md) default inset for cards, forms, panels, and grouped surfaces. Tenants override it with another scale step (tenants/*/tokens.json, incl. a Compact density mode). Replaces the deprecated semantic.space.component.padding."
+          "$description": "24px (scale.md) inset for cards, forms and panels. Tenants override it per brand and density. Replaces component.padding."
         }
       },
       "region": {
-        "$description": "hds#206 — the overridable region gutter. A named role on the t-shirt scale rather than a scale step, because theme.css retunes it per viewport; its value is always a scale step.",
+        "$description": "hds#206 region gutter role. theme.css retunes it per viewport, always with a scale step.",
         "gutter": {
           "$value": "{semantic.space.scale.md}",
-          "$description": "24px (scale.md) column and region gutters. theme.css sets it responsively to scale.lg (32px) and, below 640px, scale.sm (16px). Replaces the deprecated semantic.space.layout.gutter."
+          "$description": "24px (scale.md) column and region gutters; theme.css sets scale.lg (32px), and scale.sm (16px) below 640px. Replaces layout.gutter."
         }
       },
       "subgrid": {
@@ -1524,7 +1548,7 @@
         },
         "padding": {
           "$value": "{semantic.space.surface.padding}",
-          "$description": "24px default inset for cards, forms, panels, and grouped surfaces. DEPRECATED alias (hds#206) — use semantic.space.surface.padding (tenant/density-overridable); kept live, no removal yet.",
+          "$description": "24px inset for cards, forms and panels. DEPRECATED alias (hds#206) — use semantic.space.surface.padding; kept live, no removal yet.",
           "$deprecated": "hds#206 — use semantic.space.surface.padding"
         }
       },
@@ -1551,7 +1575,7 @@
         },
         "spacious": {
           "$value": "{primitive.space.12}",
-          "$description": "48px section break and whitespace separator between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.",
+          "$description": "48px break between major content blocks. DEPRECATED alias (hds#206) — use semantic.space.scale.xl; kept live, no removal yet.",
           "$deprecated": "hds#206 — use semantic.space.scale.xl"
         }
       },
@@ -1589,7 +1613,7 @@
         "railWidth": {
           "$type": "dimension",
           "$value": "{primitive.size.width.280}",
-          "$description": "Docs-shell left nav rail and right TOC rail width (hds#280). Both rails share one width token; default 0 below their breakpoint (see HdsDocsShell)."
+          "$description": "Docs-shell nav and TOC rail width (hds#280), one token for both rails; 0 below their breakpoint (see HdsDocsShell)."
         }
       }
     },
@@ -1915,7 +1939,7 @@
       "control": {
         "$type": "dimension",
         "$value": "{primitive.radius.4}",
-        "$description": "Corner radius for small interactive control glyphs (e.g. checkbox glyph box) that are not fully round and not the standard action radius. Real design-scale value, distinct from semantic.radius.action (hds#242)."
+        "$description": "Corner radius for small control glyphs such as the checkbox box: not fully round, and distinct from semantic.radius.action (hds#242)."
       }
     },
     "borderWidth": {
@@ -1982,7 +2006,7 @@
     },
     "size": {
       "$type": "dimension",
-      "$description": "Semantic sizing roles for control glyphs, avatars, and table rows. Distinct roles may share a primitive value today by coincidence; keep them separate so one can change without dragging the other (hds#242).",
+      "$description": "Sizing roles for control glyphs, avatars and table rows. Roles sharing a value stay separate so each can change (hds#242).",
       "control": {
         "$description": "Interactive control glyph/element sizing (checkbox glyph box, radio dot, slider track/fill, code-block copy-button-matched footprint).",
         "sm": {
@@ -2015,7 +2039,11 @@
       },
       "avatar": {
         "$value": "{primitive.size.40}",
-        "$description": "Avatar diagonal (width/height) for activity-feed and similar identity glyphs. Coincides in pixels with row.compact today; kept as a separate role per hds#242 so either can change independently."
+        "$description": "Avatar size (width and height) for activity feeds and identity glyphs. Same pixels as row.compact today, a separate role (hds#242)."
+      },
+      "tile": {
+        "$value": "{primitive.size.120}",
+        "$description": "Minimum height of a metric tile, one height for every tile so rows line up (hds#403)."
       },
       "row": {
         "$description": "Table row minimum height by density.",
@@ -2507,6 +2535,11 @@
       "$value": "{semantic.color.surface.scrim}",
       "$description": "Modal backdrop colour role. Apply alpha in the class, e.g. bg-scrim/60."
     },
+    "pressed-overlay": {
+      "$type": "color",
+      "$value": "{semantic.color.state.pressed.overlay}",
+      "$description": "Pressed-state overlay colour role. Apply alpha in the class, e.g. inset-shadow-pressed-overlay/5."
+    },
     "popover-foreground": {
       "$type": "color",
       "$value": "{semantic.color.content.primary}",