@hirobius/design-system 0.14.0 → 0.16.0

package/dist/types/src/app/components/switcher.d.ts

@@ -20,7 +20,7 @@
  */
 import React from 'react';
 type LayoutGap = 'tight' | 'normal' | 'inset' | 'spacious';
-interface SwitcherProps {
+export interface SwitcherProps {
     /** Switcher content — peer items that flip between row and column as a unit. */
     children: React.ReactNode;
     /** Container width below which items stack vertically (CSS length, e.g. '30rem'). Defaults to '30rem'. */

package/dist/types/src/app/components/toggle.d.ts

@@ -7,7 +7,7 @@
 import type { InputHTMLAttributes } from 'react';
 /** HdsToggle — boolean on/off toggle with animated thumb. */
 export type HdsToggleDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
-interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
+export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
     /** Toggle label displayed next to the control. */
     label: string;
     /** Current checked state. */
@@ -16,4 +16,3 @@ interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'
     onChange: (v: boolean) => void;
 }
 export declare const HdsToggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
-export {};

package/dist/types/src/app/components/token.d.ts

@@ -69,7 +69,7 @@ type TokenDiagramProps = TokenBaseProps & {
     rawValue?: React.ReactNode;
     onClick?: () => void;
 };
-type TokenProps = TokenNodeSurfaceProps | TokenDiagramProps;
+export type TokenProps = TokenNodeSurfaceProps | TokenDiagramProps;
 /**
  * Token - unified token component.
  *
@@ -78,7 +78,13 @@ type TokenProps = TokenNodeSurfaceProps | TokenDiagramProps;
  * @removeIn 1.0.0) that now resolves to the same node treatment.
  * Node content can use a left-side slot for swatches or other compact previews.
  */
-/** @public */
+/**
+ * Token - reflective token specimen for unified node-based token views. The `variant` axis (node | diagram — diagram is a deprecated alias that resolves to the same node treatment) plus the `selected` / `fullWidth` / `asButton` / `nowrap` / `sourceNode` states used to be a Token.module.css `[data-*]` attribute stylesheet, with a duplicate `isSelected` branch re-painted inline on top of it. Both now live as one `cva` variant set — same `--semantic-*`/`--component-*`/`--primitive-*` custom properties, same pixels, no CSS module.
+ *
+ * @public
+ * @deprecated Token is an HDS docs/lab internal (reflective token specimen for the token/foundation doc pages), not a consumer-facing HDS surface. It will be retiered to `utility` (dropped from the published barrel) at the named major.
+ * @removeIn 1.0.0
+ */
 export declare function Token(props: TokenProps): import("react/jsx-runtime").JSX.Element;
 /** @internal — CVA variant helpers; compose via Token props instead. */
 export { tokenShellVariants, tokenNodeInlineVariants, tokenLabelVariants };

package/dist/types/src/app/design-system/generated-token-refs.d.ts

@@ -138,7 +138,6 @@ export declare const tokenRefs: {
                 readonly mono: "var(--primitive-typography-family-mono)";
             };
             readonly size: {
-                readonly "2xs": "var(--primitive-typography-size-2xs)";
                 readonly xs: "var(--primitive-typography-size-xs)";
                 readonly sm: "var(--primitive-typography-size-sm)";
                 readonly base: "var(--primitive-typography-size-base)";
@@ -151,10 +150,8 @@ export declare const tokenRefs: {
                 readonly "6xl": "var(--primitive-typography-size-6xl)";
             };
             readonly weight: {
-                readonly light: "var(--primitive-typography-weight-light)";
                 readonly regular: "var(--primitive-typography-weight-regular)";
                 readonly medium: "var(--primitive-typography-weight-medium)";
-                readonly semibold: "var(--primitive-typography-weight-semibold)";
                 readonly bold: "var(--primitive-typography-weight-bold)";
             };
             readonly lineHeight: {
@@ -166,11 +163,8 @@ export declare const tokenRefs: {
                 readonly relaxed: "var(--primitive-typography-lineHeight-relaxed)";
             };
             readonly letterSpacing: {
-                readonly tighter: "var(--primitive-typography-letterSpacing-tighter)";
                 readonly tight: "var(--primitive-typography-letterSpacing-tight)";
                 readonly normal: "var(--primitive-typography-letterSpacing-normal)";
-                readonly wide: "var(--primitive-typography-letterSpacing-wide)";
-                readonly wider: "var(--primitive-typography-letterSpacing-wider)";
                 readonly caps: "var(--primitive-typography-letterSpacing-caps)";
             };
         };
@@ -211,9 +205,11 @@ export declare const tokenRefs: {
             readonly "96": "var(--primitive-size-96)";
             readonly interactive: {
                 readonly min: "var(--primitive-size-interactive-min)";
+                readonly minCompact: "var(--primitive-size-interactive-minCompact)";
             };
             readonly width: {
                 readonly "96": "var(--primitive-size-width-96)";
+                readonly "280": "var(--primitive-size-width-280)";
                 readonly "760": "var(--primitive-size-width-760)";
                 readonly "1200": "var(--primitive-size-width-1200)";
                 readonly "50ch": "var(--primitive-size-width-50ch)";
@@ -335,6 +331,7 @@ export declare const tokenRefs: {
                 readonly gap: "var(--semantic-space-sidebar-gap)";
                 readonly sectionGap: "var(--semantic-space-sidebar-sectionGap)";
                 readonly railPadding: "var(--semantic-space-sidebar-railPadding)";
+                readonly railWidth: "var(--semantic-space-sidebar-railWidth)";
             };
         };
         readonly layout: {

package/dist/types/src/app/design-system/generated-token-values.d.ts

@@ -139,7 +139,6 @@ export declare const tokenValues: {
                 readonly mono: readonly ["Geist Mono", "Courier New", "monospace"];
             };
             readonly size: {
-                readonly "2xs": "10px";
                 readonly xs: "13px";
                 readonly sm: "15px";
                 readonly base: "17px";
@@ -152,10 +151,8 @@ export declare const tokenValues: {
                 readonly "6xl": "80px";
             };
             readonly weight: {
-                readonly light: "300";
                 readonly regular: "400";
                 readonly medium: "500";
-                readonly semibold: "600";
                 readonly bold: "700";
             };
             readonly lineHeight: {
@@ -167,11 +164,8 @@ export declare const tokenValues: {
                 readonly relaxed: "1.625";
             };
             readonly letterSpacing: {
-                readonly tighter: "-0.02em";
                 readonly tight: "-0.01em";
                 readonly normal: "0em";
-                readonly wide: "0.01em";
-                readonly wider: "0.02em";
                 readonly caps: "0.06em";
             };
         };
@@ -212,9 +206,11 @@ export declare const tokenValues: {
             readonly "96": "96px";
             readonly interactive: {
                 readonly min: "44px";
+                readonly minCompact: "24px";
             };
             readonly width: {
                 readonly "96": "96px";
+                readonly "280": "280px";
                 readonly "760": "760px";
                 readonly "1200": "1200px";
                 readonly "50ch": "50ch";

package/dist/types/src/app/design-system/tokens.d.ts

@@ -67,7 +67,6 @@ declare const hds: {
     fontFamily: string;
     monoFamily: string;
     fontSize: {
-        '2xs': string;
         xs: string;
         sm: string;
         base: string;
@@ -81,7 +80,6 @@ declare const hds: {
     fontWeight: {
         regular: string;
         medium: string;
-        semibold: string;
         bold: string;
     };
     lineHeight: {
@@ -93,11 +91,8 @@ declare const hds: {
         relaxed: string;
     };
     letterSpacing: {
-        tighter: string;
         tight: string;
         normal: string;
-        wide: string;
-        wider: string;
     };
     semantic: {
         color: {

package/dist/types/src/app/layouts/CaseStudyLayout.d.ts

@@ -10,12 +10,11 @@
  *   contentSlot → full-width (maxWidth="max")  — chapters, galleries, learnings
  */
 import type { ReactNode } from 'react';
-interface CaseStudyLayoutProps {
+export interface CaseStudyLayoutProps {
     heroSlot: ReactNode;
     introSlot: ReactNode;
     metricsSlot?: ReactNode;
     contentSlot: ReactNode;
 }
 /** @public */
-export declare function CaseStudyLayout({ heroSlot, introSlot, metricsSlot, contentSlot }: CaseStudyLayoutProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function CaseStudyLayout({ heroSlot, introSlot, metricsSlot, contentSlot, }: CaseStudyLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/src/app/layouts/DocLayout.d.ts

@@ -1,6 +1,4 @@
 import { type ReactNode } from 'react';
-export declare const DOC_LAYOUT_STICKY_OFFSET: string;
-export declare const DOC_LAYOUT_STICKY_VIEWPORT_HEIGHT: string;
 declare const DOC_LAYOUT_CONTENT_WIDTHS: {
     readonly content: "var(--semantic-layout-width-content)";
     readonly max: "var(--semantic-layout-width-max)";

package/dist/types/src/app/layouts/HdsDocsShell.d.ts

@@ -0,0 +1,72 @@
+/**
+ * HdsDocsShell — three-region docs shell (left nav rail, content, right TOC
+ * rail), driven by grid columns that default to 0 and are set per breakpoint.
+ * @category Layout
+ * @tier pattern
+ * @public
+ *
+ * hds#280 slice: this is the SHELL MECHANICS ONLY — the smallest shippable
+ * piece of the docs-shell epic. It ships:
+ *
+ *   - A 3-column grid (`leftRail | content | rightRail`), both rail columns
+ *     defaulting to `0px` and set to `semantic.space.sidebar.railWidth`
+ *     (hds#280 token, our own 280px — not HeroUI's 268px) per breakpoint via
+ *     Tailwind's arbitrary-property + responsive-variant syntax, the same
+ *     technique Fumadocs/HeroUI uses. `md768:` brings in the left rail,
+ *     `xl1280:` brings in the right rail — matching the three-stage table in
+ *     hds#280.
+ *   - Each rail is `position: sticky` and scrolls independently of content
+ *     and of the other rail, clipped to the viewport minus `topOffset`.
+ *   - `topOffset` composes (it is one CSS length a caller supplies, e.g. its
+ *     own sticky header's height token) rather than a hardcoded pixel value —
+ *     the first stage of the row-cascade pattern hds#280 asks for. A second
+ *     region (a tabs row, hds#280's PR-comment addendum) would extend this by
+ *     adding its own height into the same `calc()` chain, not by hardcoding a
+ *     second offset.
+ *
+ * Deliberately NOT in this slice (tracked as proposed follow-up issues, not
+ * filed — see the PR/commit this ships in):
+ *   - Below the TOC breakpoint, `rightRail` is omitted from the grid rather
+ *     than becoming a reachable popover. The DoD explicitly wants a popover,
+ *     not "merely hidden" — that is real, separate UI work (a sticky
+ *     current-section breadcrumb bar), not shell mechanics.
+ *   - Left-rail collapsible groups (chevron, active-section pill) and
+ *     right-rail active-anchor styling (vertical rule, filled pill) are
+ *     content the caller supplies via `leftRail`/`rightRail` — this shell
+ *     does not build SideNav/Disclosure/NavItem composition for the caller.
+ *   - `check-rendered-geometry` verification at every breakpoint in the DoD's
+ *     table (needs a built Storybook + a live run, not exercised here).
+ *   - Named CSS `grid-template-areas` (the DoD's literal ask) — this ships a
+ *     3-column grid with DOM order instead, which is behaviorally identical
+ *     for a single linear row of regions and needs no separate stylesheet.
+ *     Areas earn their keep once a 4th region (a tabs row spanning full
+ *     width) is added — call out then, not before.
+ */
+import * as React from 'react';
+/** @public */
+export interface HdsDocsShellProps {
+    /** Left nav rail. Hidden below the `md768` breakpoint (grid column width 0). */
+    leftRail?: React.ReactNode;
+    /** Main content column. Always rendered, always fluid. */
+    children: React.ReactNode;
+    /**
+     * Right "on this page" rail. Hidden below the `xl1280` breakpoint (grid
+     * column width 0) — see the deferred-popover note above; it is REMOVED
+     * from the grid at that breakpoint, not merely visually hidden, so no
+     * hidden interactive content sits in the DOM unreachable.
+     */
+    rightRail?: React.ReactNode;
+    /**
+     * CSS length a caller supplies for a sticky header ABOVE this shell (e.g.
+     * TopNav's height token), so each rail's sticky offset and scrollable
+     * height compose against it instead of assuming the shell owns the whole
+     * viewport. Defaults to `'0px'`.
+     */
+    topOffset?: string;
+    /** Escape hatch: only for narrow layout adjustments that don't belong in the primitive API. */
+    className?: string;
+    /** Escape hatch: only for narrow layout adjustments that don't belong in the primitive API. */
+    style?: React.CSSProperties;
+}
+/** @public */
+export declare const HdsDocsShell: React.ForwardRefExoticComponent<HdsDocsShellProps & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts

@@ -1,6 +1,13 @@
 import type { ReactNode } from 'react';
 import { type DocLayoutContentMaxWidth } from './DocLayout.js';
-/** @public */
+/**
+ * HdsSystemDocLayout — single centered content column for documentation pages.
+ * Thin wrapper around DocLayout: takes only `contentSlot` and `contentMaxWidth`,
+ * with no sidebar or nav region to pass one into. Not the three-column docs
+ * shell (left rail + content + right rail) — that is tracked as its own shell
+ * component (hds#280).
+ * @public
+ */
 export declare function HdsSystemDocLayout({ contentSlot, contentMaxWidth, }: {
     contentSlot: ReactNode;
     contentMaxWidth?: DocLayoutContentMaxWidth;

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

@@ -36,6 +36,7 @@ export * from './app/components/progress.js';
 export * from './app/components/skeleton.js';
 export * from './app/components/spinner.js';
 export * from './app/components/segmented-control.js';
+export * from './app/components/select.js';
 export * from './app/components/stack.js';
 export * from './app/components/surface.js';
 export * from './app/components/table.js';
@@ -108,6 +109,7 @@ 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: {
@@ -593,12 +595,6 @@ export declare const tokens: {
             };
             size: {
                 $type: string;
-                "2xs": {
-                    $value: {
-                        value: number;
-                        unit: string;
-                    };
-                };
                 xs: {
                     $value: {
                         value: number;
@@ -663,19 +659,12 @@ export declare const tokens: {
             };
             weight: {
                 $type: string;
-                light: {
-                    $value: number;
-                    $description: string;
-                };
                 regular: {
                     $value: number;
                 };
                 medium: {
                     $value: number;
                 };
-                semibold: {
-                    $value: number;
-                };
                 bold: {
                     $value: number;
                 };
@@ -705,12 +694,6 @@ export declare const tokens: {
             };
             letterSpacing: {
                 $type: string;
-                tighter: {
-                    $value: {
-                        value: number;
-                        unit: string;
-                    };
-                };
                 tight: {
                     $value: {
                         value: number;
@@ -723,18 +706,6 @@ export declare const tokens: {
                         unit: string;
                     };
                 };
-                wide: {
-                    $value: {
-                        value: number;
-                        unit: string;
-                    };
-                };
-                wider: {
-                    $value: {
-                        value: number;
-                        unit: string;
-                    };
-                };
                 caps: {
                     $value: {
                         value: number;
@@ -961,6 +932,14 @@ export declare const tokens: {
                     };
                     $description: string;
                 };
+                minCompact: {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
             };
             width: {
                 "96": {
@@ -992,6 +971,14 @@ export declare const tokens: {
                         unit: string;
                     };
                 };
+                "280": {
+                    $type: string;
+                    $value: {
+                        value: number;
+                        unit: string;
+                    };
+                    $description: string;
+                };
             };
         };
         grid: {
@@ -1629,6 +1616,11 @@ export declare const tokens: {
                     $value: string;
                     $description: string;
                 };
+                railWidth: {
+                    $type: string;
+                    $value: string;
+                    $description: string;
+                };
             };
         };
         layout: {

package/dist/variables.css

@@ -108,7 +108,6 @@
   --primitive-typography-family-primary: Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --primitive-typography-family-display: Satoshi, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --primitive-typography-family-mono: "Geist Mono", "Courier New", monospace;
-  --primitive-typography-size-2xs: 10px;
   --primitive-typography-size-xs: 13px;
   --primitive-typography-size-sm: 15px;
   --primitive-typography-size-base: 17px;
@@ -119,10 +118,8 @@
   --primitive-typography-size-4xl: 48px;
   --primitive-typography-size-5xl: 72px;
   --primitive-typography-size-6xl: 80px;
-  --primitive-typography-weight-light: 300;
   --primitive-typography-weight-regular: 400;
   --primitive-typography-weight-medium: 500;
-  --primitive-typography-weight-semibold: 600;
   --primitive-typography-weight-bold: 700;
   --primitive-typography-lineHeight-compact: 0.95;
   --primitive-typography-lineHeight-none: 1;
@@ -130,11 +127,8 @@
   --primitive-typography-lineHeight-snug: 1.375;
   --primitive-typography-lineHeight-normal: 1.5;
   --primitive-typography-lineHeight-relaxed: 1.625;
-  --primitive-typography-letterSpacing-tighter: -0.02em;
   --primitive-typography-letterSpacing-tight: -0.01em;
   --primitive-typography-letterSpacing-normal: 0em;
-  --primitive-typography-letterSpacing-wide: 0.01em;
-  --primitive-typography-letterSpacing-wider: 0.02em;
   --primitive-typography-letterSpacing-caps: 0.06em;
   --primitive-duration-instant: 100ms;
   --primitive-duration-short: 150ms;
@@ -163,7 +157,9 @@
   --primitive-size-80: 80px;
   --primitive-size-96: 96px;
   --primitive-size-interactive-min: 44px;
+  --primitive-size-interactive-minCompact: 24px;
   --primitive-size-width-96: 96px;
+  --primitive-size-width-280: 280px;
   --primitive-size-width-760: 760px;
   --primitive-size-width-1200: 1200px;
   --primitive-size-width-50ch: 50ch;
@@ -247,6 +243,7 @@
   --semantic-space-sidebar-gap: var(--primitive-space-4);
   --semantic-space-sidebar-sectionGap: var(--primitive-space-3);
   --semantic-space-sidebar-railPadding: var(--primitive-space-5);
+  --semantic-space-sidebar-railWidth: var(--primitive-size-width-280);
   --semantic-layout-width-content: var(--primitive-size-width-760);
   --semantic-layout-width-max: var(--primitive-size-width-1200);
   --semantic-layout-container-maxWidth: var(--primitive-size-width-1200);
@@ -505,4 +502,59 @@
   --semantic-accent-subtle: var(--primitive-color-neutral-800);
   --component-badge-bg: var(--semantic-color-feedback-bg-info);
   --component-button-primary-textDisabled: var(--semantic-color-content-disabled);
+  --semantic-elevation-flat-surface: var(--semantic-color-surface-page);
+  --semantic-elevation-flat-border: var(--semantic-color-border-subtle);
+  --semantic-elevation-raised-surface: var(--semantic-color-surface-raised);
+  --semantic-elevation-floating-surface: var(--semantic-color-surface-raised);
+  --semantic-elevation-overlay-surface: var(--semantic-color-surface-overlay);
+  --component-nav-bg: var(--semantic-color-surface-page);
+  --component-nav-bgActive: var(--semantic-accent-subtle);
+  --component-nav-borderActive: var(--semantic-color-surface-accent);
+  --component-nav-text: var(--semantic-color-content-secondary);
+  --component-nav-textActive: var(--semantic-color-content-primary);
+  --component-tag-background: var(--semantic-accent-subtle);
+  --component-tag-text: var(--semantic-color-content-primary);
+  --component-tag-border: var(--semantic-color-border-default);
+  --component-tag-activeText: var(--semantic-color-content-onAccent);
+  --component-tag-activeBackground: var(--semantic-accent-rest);
+  --component-tag-activeBorder: var(--semantic-accent-rest);
+  --component-tag-activeHover: var(--semantic-accent-hover);
+  --component-badge-text: var(--semantic-color-content-primary);
+  --component-button-bg: var(--semantic-color-surface-accent);
+  --component-button-bgHover: var(--semantic-accent-hover);
+  --component-button-text: var(--semantic-color-content-onAccent);
+  --component-button-primary-bgDisabled: var(--semantic-color-surface-accentSubtle);
+  --component-button-secondary-bg-rest: var(--semantic-color-surface-page);
+  --component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
+  --component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
+  --component-button-secondary-border-rest: var(--semantic-color-border-interactive);
+  --component-button-secondary-border-hover: var(--semantic-color-border-interactive);
+  --component-button-secondary-border-pressed: var(--semantic-color-border-interactive);
+  --component-button-secondary-border-disabled: var(--semantic-color-border-subdued);
+  --component-button-secondary-text: var(--semantic-color-content-primary);
+  --component-input-bg: var(--semantic-color-surface-raised);
+  --component-input-text: var(--semantic-color-content-primary);
+  --component-input-border: var(--semantic-color-border-interactive);
+  --component-input-borderError: var(--semantic-color-feedback-error);
+  --component-card-bg: var(--semantic-color-surface-raised);
+  --component-card-border: var(--semantic-color-border-default);
+  --role-background: var(--semantic-color-surface-page);
+  --role-foreground: var(--semantic-color-content-primary);
+  --role-card: var(--semantic-color-surface-raised);
+  --role-card-foreground: var(--semantic-color-content-primary);
+  --role-popover: var(--semantic-color-surface-overlay);
+  --role-popover-foreground: var(--semantic-color-content-primary);
+  --role-primary: var(--semantic-color-surface-accent);
+  --role-primary-foreground: var(--semantic-color-content-onAccent);
+  --role-secondary: var(--semantic-color-surface-raised);
+  --role-secondary-foreground: var(--semantic-color-content-primary);
+  --role-muted: var(--semantic-color-surface-overlay);
+  --role-muted-foreground: var(--semantic-color-content-secondary);
+  --role-accent: var(--semantic-color-surface-accentSubtle);
+  --role-accent-foreground: var(--semantic-color-content-accent);
+  --role-destructive: var(--semantic-color-feedback-error);
+  --role-destructive-foreground: var(--semantic-color-content-inverse);
+  --role-border: var(--semantic-color-border-default);
+  --role-input: var(--semantic-color-border-interactive);
+  --role-ring: var(--semantic-color-border-accent);
 }

package/hirobius.tokens.json

@@ -495,12 +495,6 @@
       },
       "size": {
         "$type": "dimension",
-        "2xs": {
-          "$value": {
-            "value": 10,
-            "unit": "px"
-          }
-        },
         "xs": {
           "$value": {
             "value": 13,
@@ -565,19 +559,12 @@
       },
       "weight": {
         "$type": "fontWeight",
-        "light": {
-          "$value": 300,
-          "$description": "Swiss-canon heading weight. Display and h1/h2 composites only."
-        },
         "regular": {
           "$value": 400
         },
         "medium": {
           "$value": 500
         },
-        "semibold": {
-          "$value": 600
-        },
         "bold": {
           "$value": 700
         }
@@ -607,12 +594,6 @@
       },
       "letterSpacing": {
         "$type": "dimension",
-        "tighter": {
-          "$value": {
-            "value": -0.02,
-            "unit": "em"
-          }
-        },
         "tight": {
           "$value": {
             "value": -0.01,
@@ -625,18 +606,6 @@
             "unit": "em"
           }
         },
-        "wide": {
-          "$value": {
-            "value": 0.01,
-            "unit": "em"
-          }
-        },
-        "wider": {
-          "$value": {
-            "value": 0.02,
-            "unit": "em"
-          }
-        },
         "caps": {
           "$value": {
             "value": 0.06,
@@ -862,6 +831,14 @@
             "unit": "px"
           },
           "$description": "Minimum interactive hit target size."
+        },
+        "minCompact": {
+          "$type": "dimension",
+          "$value": {
+            "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."
         }
       },
       "width": {
@@ -893,6 +870,14 @@
             "value": 50,
             "unit": "ch"
           }
+        },
+        "280": {
+          "$type": "dimension",
+          "$value": {
+            "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."
         }
       }
     },
@@ -1530,6 +1515,11 @@
         "railPadding": {
           "$value": "{primitive.space.5}",
           "$description": "20px outer padding for sidebar and TOC rails."
+        },
+        "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)."
         }
       }
     },