@hirobius/design-system 0.15.0 → 0.17.0

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

@@ -6,9 +6,9 @@
  */
 import * as React from 'react';
 /** @internal */
-declare const stepMarkerVariants: (props?: {
-    state?: "current" | "complete" | "upcoming";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const stepMarkerVariants: (props?: ({
+    state?: "current" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export interface Step {
     /** Visible label for the step. */
@@ -25,7 +25,9 @@ export interface StepperProps extends React.HTMLAttributes<HTMLOListElement> {
     /** Layout direction. Defaults to 'horizontal'. */
     orientation?: 'horizontal' | 'vertical';
 }
-/** Step indicator for multi-step flows. Purely presentational — no navigation. */
+/**
+ * Step indicator for multi-step flows. Purely presentational — no navigation.
+ */
 export declare const Stepper: React.ForwardRefExoticComponent<StepperProps & React.RefAttributes<HTMLOListElement>>;
 /** @internal — CVA variant helper; compose via Stepper's internal state instead. */
 export { stepMarkerVariants };

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

@@ -1,10 +1,10 @@
 import React, { type CSSProperties, type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { PaddingOption } from './surface-padding.js';
-declare const surfaceVariants: (props?: {
-    padding?: "none" | "item" | "px16" | "px24" | "component";
-    shadow?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const surfaceVariants: (props?: ({
+    padding?: "none" | "item" | "px16" | "px24" | "component" | null | undefined;
+    shadow?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type SurfaceVariantProps = VariantProps<typeof surfaceVariants>;
 export interface SurfaceProps extends Omit<HTMLAttributes<HTMLDivElement>, 'style' | 'className'>, Omit<SurfaceVariantProps, 'shadow'> {
     /** Surface content. */

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

@@ -5,23 +5,34 @@
  * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300
  */
 import { type ReactNode } from 'react';
-declare const tableHeaderCellVariants: (props?: {
-    align?: "left" | "right" | "center";
-    density?: "compact" | "comfortable";
-    sticky?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const tableDataCellVariants: (props?: {
-    align?: "left" | "right" | "center";
-    density?: "compact" | "comfortable";
-    divider?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const tableHeaderCellVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
+    sticky?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const tableSortButtonVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const tableDataCellVariants: (props?: ({
+    align?: "center" | "left" | "right" | null | undefined;
+    density?: "compact" | "comfortable" | null | undefined;
+    divider?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export type TableColumnAlign = 'left' | 'center' | 'right';
+/** @public */
+export type TableSortDirection = 'ascending' | 'descending' | 'none';
 export type TableColumn = {
     key: string;
     label: ReactNode;
     width?: string;
     align?: TableColumnAlign;
+    /** Renders the header as a button and sets `aria-sort` on the header cell. */
+    sortable?: boolean;
+    /** Current sort state for this column; defaults to `'none'` when `sortable`. */
+    sortDirection?: TableSortDirection;
+    /** Called when the sort button is activated (click, Enter, or Space). */
+    onSort?: () => void;
 };
 export type TableCellSlot = 'label' | 'value' | 'description' | 'token' | 'code' | 'custom' | 'icon' | 'badge' | 'action';
 export type TableCell = {
@@ -49,4 +60,4 @@ export declare function Table({ columns, rows, caption, captionAction, descripti
     stickyHeader?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 /** @internal — CVA variant helpers; compose via Table props instead. */
-export { tableHeaderCellVariants, tableDataCellVariants };
+export { tableHeaderCellVariants, tableDataCellVariants, tableSortButtonVariants };

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

@@ -17,10 +17,10 @@
  * contract expects, just keyed by selection instead of tone/size/density.
  */
 import * as React from 'react';
-declare const tagButtonVariants: (props?: import("class-variance-authority/dist/types").ClassProp) => string;
-declare const tagPillVariants: (props?: {
-    selected?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const tagButtonVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
+declare const tagPillVariants: (props?: ({
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export interface TagProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
     /** Tag content displayed inside the pill. */

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

@@ -7,9 +7,9 @@
  */
 import { type CSSProperties, type ElementType, type HTMLAttributes, type ReactNode } from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const textVariants: (props?: {
-    variant?: "display" | "caption" | "body" | "heading1" | "heading2" | "heading3" | "ui" | "eyebrow" | "technical" | "badge" | "docLede" | "docBody" | "docSmall" | "docCode";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const textVariants: (props?: ({
+    variant?: "display" | "caption" | "body" | "heading1" | "heading2" | "heading3" | "ui" | "eyebrow" | "technical" | "badge" | "docLede" | "docBody" | "docSmall" | "docCode" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TextVariantProps = VariantProps<typeof textVariants>;
 type TextVariant = NonNullable<TextVariantProps['variant']>;
 type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';

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

@@ -10,10 +10,10 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const textareaVariants: (props?: {
-    resize?: "none" | "both" | "vertical";
-    invalid?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const textareaVariants: (props?: ({
+    resize?: "none" | "both" | "vertical" | null | undefined;
+    invalid?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export type TextareaResize = NonNullable<VariantProps<typeof textareaVariants>['resize']>;
 export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'disabled'> {

package/dist/types/src/app/components/time-input.d.ts

@@ -11,9 +11,9 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
-declare const hdsTimeInputVariants: (props?: {
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const hdsTimeInputVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TimeInputVariantProps = VariantProps<typeof hdsTimeInputVariants>;
 /** @public */
 export interface TimeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, TimeInputVariantProps {

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

@@ -21,9 +21,9 @@
 import * as React from 'react';
 import * as ToastPrimitive from '@radix-ui/react-toast';
 import { type VariantProps } from 'class-variance-authority';
-declare const toastIconVariants: (props?: {
-    tone?: "success" | "danger" | "warning" | "info" | "neutral";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const toastIconVariants: (props?: ({
+    tone?: "success" | "danger" | "warning" | "info" | "neutral" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ToastIconVariantProps = VariantProps<typeof toastIconVariants>;
 /** @public */
 export type ToastTone = NonNullable<ToastIconVariantProps['tone']>;

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

@@ -15,10 +15,10 @@
 import * as React from 'react';
 import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { type VariantProps } from 'class-variance-authority';
-declare const hdsToggleButtonVariants: (props?: {
-    variant?: "secondary" | "ghost";
-    size?: "sm" | "md" | "lg";
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const hdsToggleButtonVariants: (props?: ({
+    variant?: "secondary" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type ToggleButtonVariantProps = VariantProps<typeof hdsToggleButtonVariants>;
 /** @public */
 export interface ToggleButtonProps extends React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>, ToggleButtonVariantProps {

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

@@ -1,11 +1,11 @@
 /**
- * HdsToggle — boolean on/off toggle with animated thumb.
+ * Toggle — boolean on/off toggle with animated thumb.
  * @category Inputs
  * @tier primitive
  * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=37-19
  */
 import type { InputHTMLAttributes } from 'react';
-/** HdsToggle — boolean on/off toggle with animated thumb. */
+/** Toggle — boolean on/off toggle with animated thumb. */
 export type HdsToggleDemoState = 'rest' | 'hover' | 'focused' | 'pressed' | 'disabled';
 export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange'> {
     /** Toggle label displayed next to the control. */
@@ -15,4 +15,4 @@ export interface ToggleProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     /** Called when the toggle changes. */
     onChange: (v: boolean) => void;
 }
-export declare const HdsToggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;
+export declare const Toggle: import("react").ForwardRefExoticComponent<ToggleProps & import("react").RefAttributes<HTMLInputElement>>;

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

@@ -12,22 +12,22 @@
  * custom properties, same pixels, no CSS module.
  */
 import React from 'react';
-declare const tokenShellVariants: (props?: {
-    variant?: "node" | "diagram";
-    sourceNode?: boolean;
-    selected?: boolean;
-    fullWidth?: boolean;
-    asButton?: boolean;
-    nowrap?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const tokenNodeInlineVariants: (props?: {
-    sourceNode?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
-declare const tokenLabelVariants: (props?: {
-    sourceNode?: boolean;
-    truncateFromStart?: boolean;
-    selected?: boolean;
-} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare const tokenShellVariants: (props?: ({
+    variant?: "node" | "diagram" | null | undefined;
+    sourceNode?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    fullWidth?: boolean | null | undefined;
+    asButton?: boolean | null | undefined;
+    nowrap?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const tokenNodeInlineVariants: (props?: ({
+    sourceNode?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const tokenLabelVariants: (props?: ({
+    sourceNode?: boolean | null | undefined;
+    truncateFromStart?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type TokenBaseProps = {
     className?: string;
     fullWidth?: boolean;
@@ -78,7 +78,13 @@ export 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/components/toolbar.d.ts

@@ -20,7 +20,7 @@ declare const ToolbarSeparator: React.ForwardRefExoticComponent<Omit<ToolbarPrim
 declare const ToolbarToggleGroup: React.ForwardRefExoticComponent<(Omit<ToolbarPrimitive.ToolbarToggleGroupSingleProps & React.RefAttributes<HTMLDivElement>, "ref"> | Omit<ToolbarPrimitive.ToolbarToggleGroupMultipleProps & React.RefAttributes<HTMLDivElement>, "ref">) & React.RefAttributes<HTMLDivElement>>;
 declare const ToolbarToggleItem: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarToggleItemProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 declare const ToolbarLink: React.ForwardRefExoticComponent<Omit<ToolbarPrimitive.ToolbarLinkProps & React.RefAttributes<HTMLAnchorElement>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-interface ToolbarComponent extends React.FC<React.ComponentProps<typeof ToolbarPrimitive.Root>> {
+export interface ToolbarComponent extends React.FC<React.ComponentProps<typeof ToolbarPrimitive.Root>> {
     Button: typeof ToolbarButton;
     Separator: typeof ToolbarSeparator;
     ToggleGroup: typeof ToolbarToggleGroup;

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

@@ -3,7 +3,7 @@
  * @tier utility
  */
 /**
- * Tooltip — HDS image interaction tooltip
+ * ExpandTooltip — HDS image interaction tooltip
  *
  * A pill-shaped label (brand blue / white text) that indicates an image
  * is expandable. Supports two render modes:
@@ -29,5 +29,5 @@ interface TooltipProps {
     /** Cursor Y position in client coordinates. */
     y?: number;
 }
-export declare function Tooltip({ visible, mode, label, x, y }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExpandTooltip({ visible, mode, label, x, y }: TooltipProps): import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/types/src/app/components/top-nav.d.ts

@@ -17,5 +17,7 @@ export interface TopNavProps extends React.HTMLAttributes<HTMLElement> {
     /** Pins the bar to the top of its scroll container. */
     sticky?: boolean;
 }
-/** Top navigation bar with brand, nav, and trailing action slots. */
+/**
+ * Top navigation bar with brand, nav, and trailing action slots.
+ */
 export declare const TopNav: React.ForwardRefExoticComponent<TopNavProps & React.RefAttributes<HTMLElement>>;

package/dist/types/src/app/components/tree-list.d.ts

@@ -24,5 +24,7 @@ export interface TreeListProps extends Omit<React.HTMLAttributes<HTMLUListElemen
     /** Called with a node's id when its label row is clicked. */
     onSelect?: (id: string) => void;
 }
-/** Renders a hierarchical `role="tree"` list; nodes with children get an expand/collapse toggle. */
+/**
+ * Renders a hierarchical `role="tree"` list; nodes with children get an expand/collapse toggle.
+ */
 export declare const TreeList: React.ForwardRefExoticComponent<TreeListProps & React.RefAttributes<HTMLUListElement>>;

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)";
@@ -256,6 +252,7 @@ export declare const tokenRefs: {
                 readonly duration: "var(--hds-motion-exit-duration)";
                 readonly easing: "var(--hds-motion-exit-easing)";
             };
+            readonly distance: "var(--semantic-motion-distance)";
         };
         readonly color: {
             readonly surface: {
@@ -308,6 +305,19 @@ export declare const tokenRefs: {
             };
         };
         readonly space: {
+            readonly scale: {
+                readonly xs: "var(--semantic-space-scale-xs)";
+                readonly sm: "var(--semantic-space-scale-sm)";
+                readonly md: "var(--semantic-space-scale-md)";
+                readonly lg: "var(--semantic-space-scale-lg)";
+                readonly xl: "var(--semantic-space-scale-xl)";
+            };
+            readonly surface: {
+                readonly padding: "var(--semantic-space-surface-padding)";
+            };
+            readonly region: {
+                readonly gutter: "var(--semantic-space-region-gutter)";
+            };
             readonly subgrid: {
                 readonly hairline: "var(--semantic-space-subgrid-hairline)";
                 readonly xs: "var(--semantic-space-subgrid-xs)";
@@ -335,6 +345,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: {
@@ -454,6 +465,7 @@ export declare const tokenRefs: {
         };
         readonly radius: {
             readonly action: "var(--semantic-radius-action)";
+            readonly control: "var(--semantic-radius-control)";
         };
         readonly borderWidth: {
             readonly default: "var(--semantic-borderWidth-default)";
@@ -486,6 +498,27 @@ export declare const tokenRefs: {
                 readonly border: "var(--semantic-elevation-overlay-border)";
             };
         };
+        readonly size: {
+            readonly control: {
+                readonly sm: "var(--semantic-size-control-sm)";
+                readonly md: "var(--semantic-size-control-md)";
+                readonly lg: "var(--semantic-size-control-lg)";
+            };
+            readonly icon: {
+                readonly sm: "var(--semantic-size-icon-sm)";
+                readonly md: "var(--semantic-size-icon-md)";
+                readonly lg: "var(--semantic-size-icon-lg)";
+            };
+            readonly avatar: "var(--semantic-size-avatar)";
+            readonly row: {
+                readonly compact: "var(--semantic-size-row-compact)";
+                readonly comfortable: "var(--semantic-size-row-comfortable)";
+            };
+        };
+        readonly zIndex: {
+            readonly control: "var(--semantic-zIndex-control)";
+            readonly sticky: "var(--semantic-zIndex-sticky)";
+        };
     };
     readonly component: {
         readonly nav: {

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

@@ -139,23 +139,20 @@ 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";
-                readonly lg: "20px";
-                readonly xl: "24px";
-                readonly "2xl": "30px";
-                readonly "3xl": "36px";
-                readonly "4xl": "48px";
-                readonly "5xl": "72px";
-                readonly "6xl": "80px";
+                readonly xs: "12px";
+                readonly sm: "14px";
+                readonly base: "16px";
+                readonly lg: "18px";
+                readonly xl: "20px";
+                readonly "2xl": "24px";
+                readonly "3xl": "30px";
+                readonly "4xl": "36px";
+                readonly "5xl": "48px";
+                readonly "6xl": "60px";
             };
             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: {
@@ -110,19 +105,35 @@ declare const hds: {
             };
         };
         space: {
+            scale: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            surface: {
+                padding: string;
+            };
+            region: {
+                gutter: string;
+            };
             subgrid: {
                 gap: string;
                 hairline: string;
                 xs: string;
             };
             component: {
+                /** @deprecated hds#206 — use `semantic.space.surface.padding`. */
                 padding: string;
+                /** @deprecated hds#206 — use `semantic.space.scale.xs`. */
                 gap: string;
             };
             stack: {
                 gap: string;
             };
             layout: {
+                /** @deprecated hds#206 — use `semantic.space.region.gutter`. */
                 gutter: string;
                 gap: string;
                 section: string;

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;