@hirobius/design-system 0.19.1 → 0.21.0

package/dist/tokens.js

@@ -134,7 +134,8 @@ const a = {
         "3xl": "30px",
         "4xl": "36px",
         "5xl": "48px",
-        "6xl": "60px"
+        "6xl": "60px",
+        code: "13px"
       },
       weight: {
         regular: "400",
@@ -147,7 +148,9 @@ const a = {
         tight: "1.25",
         snug: "1.375",
         normal: "1.5",
-        relaxed: "1.625"
+        relaxed: "1.625",
+        display: "1.05",
+        body: "1.6"
       },
       letterSpacing: {
         tight: "-0.01em",
@@ -190,6 +193,7 @@ const a = {
       64: "64px",
       80: "80px",
       96: "96px",
+      120: "120px",
       interactive: {
         min: "44px",
         minCompact: "24px"
@@ -257,26 +261,12 @@ const a = {
         letterSpacing: "var(--semantic-typography-display-letter-spacing)",
         lineHeight: "var(--semantic-typography-display-line-height)"
       },
-      h1: {
-        fontFamily: "var(--semantic-typography-h1-font-family)",
-        fontSize: "var(--semantic-typography-h1-font-size)",
-        fontWeight: "var(--semantic-typography-h1-font-weight)",
-        letterSpacing: "var(--semantic-typography-h1-letter-spacing)",
-        lineHeight: "var(--semantic-typography-h1-line-height)"
-      },
-      h2: {
-        fontFamily: "var(--semantic-typography-h2-font-family)",
-        fontSize: "var(--semantic-typography-h2-font-size)",
-        fontWeight: "var(--semantic-typography-h2-font-weight)",
-        letterSpacing: "var(--semantic-typography-h2-letter-spacing)",
-        lineHeight: "var(--semantic-typography-h2-line-height)"
-      },
-      h3: {
-        fontFamily: "var(--semantic-typography-h3-font-family)",
-        fontSize: "var(--semantic-typography-h3-font-size)",
-        fontWeight: "var(--semantic-typography-h3-font-weight)",
-        letterSpacing: "var(--semantic-typography-h3-letter-spacing)",
-        lineHeight: "var(--semantic-typography-h3-line-height)"
+      title: {
+        fontFamily: "var(--semantic-typography-title-font-family)",
+        fontSize: "var(--semantic-typography-title-font-size)",
+        fontWeight: "var(--semantic-typography-title-font-weight)",
+        letterSpacing: "var(--semantic-typography-title-letter-spacing)",
+        lineHeight: "var(--semantic-typography-title-line-height)"
       },
       body: {
         fontFamily: "var(--semantic-typography-body-font-family)",
@@ -301,14 +291,6 @@ const a = {
         letterSpacing: "var(--semantic-typography-caption-letter-spacing)",
         lineHeight: "var(--semantic-typography-caption-line-height)"
       },
-      eyebrow: {
-        fontFamily: "var(--semantic-typography-eyebrow-font-family)",
-        fontSize: "var(--semantic-typography-eyebrow-font-size)",
-        fontWeight: "var(--semantic-typography-eyebrow-font-weight)",
-        letterSpacing: "var(--semantic-typography-eyebrow-letter-spacing)",
-        lineHeight: "var(--semantic-typography-eyebrow-line-height)",
-        textTransform: "var(--semantic-typography-eyebrow-text-transform)"
-      },
       mono: {
         fontFamily: "var(--semantic-typography-mono-font-family)",
         fontSize: "var(--semantic-typography-mono-font-size)",
@@ -502,16 +484,25 @@ const o = "var(--primitive-typography-family-primary)", n = "var(--primitive-typ
         xs: "var(--semantic-space-subgrid-xs)"
       },
       component: {
-        /** @deprecated hds#206 — use `semantic.space.surface.padding`. */
+        /**
+         * @deprecated hds#206 — use `semantic.space.surface.padding`.
+         * @removeIn 1.0.0
+         */
         padding: "var(--semantic-space-surface-padding)",
-        /** @deprecated hds#206 — use `semantic.space.scale.xs`. */
+        /**
+         * @deprecated hds#206 — use `semantic.space.scale.xs`.
+         * @removeIn 1.0.0
+         */
         gap: "var(--semantic-space-scale-xs)"
       },
       stack: {
         gap: "var(--semantic-space-section-stack)"
       },
       layout: {
-        /** @deprecated hds#206 — use `semantic.space.region.gutter`. */
+        /**
+         * @deprecated hds#206 — use `semantic.space.region.gutter`.
+         * @removeIn 1.0.0
+         */
         gutter: "var(--semantic-space-region-gutter)",
         gap: "var(--semantic-space-layout-gap)",
         section: "var(--semantic-layout-section-paddingY)"
@@ -528,52 +519,150 @@ const o = "var(--primitive-typography-family-primary)", n = "var(--primitive-typ
       }
     },
     typography: {
+      /** @deprecated hds#483 — use `typeStyles.ui`.
+       * @removeIn 1.0.0 */
       label: i.semantic.typography.ui,
+      /** @deprecated hds#483 — use `typeStyles.ui`.
+       * @removeIn 1.0.0 */
       labelDescriptive: i.semantic.typography.ui,
+      /** @deprecated hds#483 — use `typeStyles.mono`.
+       * @removeIn 1.0.0 */
       labelTechnical: i.semantic.typography.mono
     }
   },
   // Each style object spreads directly into a React inline style prop.
   // CSS vars resolve at paint time — no hardcoded pixel values.
   typeStyles: {
-    // ── Canonical composites (Adrian directive 2026-05-04) ────────────────────
-    // 7 roles. body/ui/eyebrow/mono carry maxWidth: 60ch where appropriate.
-    // Eyebrow bakes text-transform: uppercase + caps tracking into the token —
-    // never re-apply textTransform inline. Casing changes are eyebrow-only.
+    // ── The 5-role ramp plus mono (hds#483) ───────────────────────────────────
+    // display 48 / title 24 / body 16 / ui 14 / caption 12 / mono 13. body, ui
+    // and mono carry maxWidth: 60ch. Casing is never changed inline.
     display: i.semantic.typography.display,
-    h1: i.semantic.typography.h1,
-    h2: i.semantic.typography.h2,
-    h3: i.semantic.typography.h3,
+    title: i.semantic.typography.title,
     body: i.semantic.typography.body,
     ui: i.semantic.typography.ui,
-    eyebrow: i.semantic.typography.eyebrow,
-    mono: i.semantic.typography.mono,
-    // ── Migration aliases → canonical composites ──────────────────────────────
-    // Pre-2026-05-04 names map to the new roles. small → ui; the eyebrow-pattern
-    // callsites migrate explicitly to typeStyles.eyebrow as part of the
-    // ops-dashboard sweep. caption now resolves to its own 12/16 composite
-    // (semantic.typography.caption, matching Figma) rather than aliasing ui.
-    small: i.semantic.typography.ui,
     caption: i.semantic.typography.caption,
-    heading1: i.semantic.typography.h1,
-    heading2: i.semantic.typography.h2,
-    heading3: i.semantic.typography.h3,
-    technical: i.semantic.typography.mono,
-    badge: i.semantic.typography.eyebrow,
-    micro: i.semantic.typography.eyebrow,
+    mono: i.semantic.typography.mono,
+    // ── Deprecated aliases → the six roles ────────────────────────────────────
+    // Every pre-cut name still resolves, to the role it now points at.
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    h1: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    h2: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    h3: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    heading1: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    heading2: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    heading3: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    headingHero: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    headingSection: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.title`.
+     * @removeIn 1.0.0
+     */
+    display2: i.semantic.typography.title,
+    /**
+     * @deprecated hds#483 — use `typeStyles.display`.
+     * @removeIn 1.0.0
+     */
     displayXl: i.semantic.typography.display,
+    /**
+     * @deprecated hds#483 — use `typeStyles.display`.
+     * @removeIn 1.0.0
+     */
     display1: i.semantic.typography.display,
-    display2: i.semantic.typography.h1,
-    headingHero: i.semantic.typography.h1,
-    headingSection: i.semantic.typography.h3,
-    title: i.semantic.typography.body,
+    /**
+     * @deprecated hds#483 — use `typeStyles.body`.
+     * @removeIn 1.0.0
+     */
     body2: i.semantic.typography.body,
+    /**
+     * @deprecated hds#483 — use `typeStyles.body`.
+     * @removeIn 1.0.0
+     */
     bodyLarge: i.semantic.typography.body,
+    /**
+     * @deprecated hds#483 — use `typeStyles.ui`.
+     * @removeIn 1.0.0
+     */
+    small: i.semantic.typography.ui,
+    /**
+     * @deprecated hds#483 — use `typeStyles.ui`.
+     * @removeIn 1.0.0
+     */
     bodySmall: i.semantic.typography.ui,
-    monoXs: i.semantic.typography.mono,
-    monoSm: i.semantic.typography.mono,
+    /**
+     * @deprecated hds#483 — use `typeStyles.ui`.
+     * @removeIn 1.0.0
+     */
     label: i.semantic.typography.ui,
+    /**
+     * @deprecated hds#483 — use `typeStyles.ui`.
+     * @removeIn 1.0.0
+     */
     labelDescriptive: i.semantic.typography.ui,
+    /**
+     * @deprecated hds#483 — use `typeStyles.caption`.
+     * @removeIn 1.0.0
+     */
+    eyebrow: i.semantic.typography.caption,
+    /**
+     * @deprecated hds#483 — use `typeStyles.caption`.
+     * @removeIn 1.0.0
+     */
+    badge: i.semantic.typography.caption,
+    /**
+     * @deprecated hds#483 — use `typeStyles.caption`.
+     * @removeIn 1.0.0
+     */
+    micro: i.semantic.typography.caption,
+    /**
+     * @deprecated hds#483 — use `typeStyles.mono`.
+     * @removeIn 1.0.0
+     */
+    technical: i.semantic.typography.mono,
+    /**
+     * @deprecated hds#483 — use `typeStyles.mono`.
+     * @removeIn 1.0.0
+     */
+    monoXs: i.semantic.typography.mono,
+    /**
+     * @deprecated hds#483 — use `typeStyles.mono`.
+     * @removeIn 1.0.0
+     */
+    monoSm: i.semantic.typography.mono,
+    /**
+     * @deprecated hds#483 — use `typeStyles.mono`.
+     * @removeIn 1.0.0
+     */
     labelTechnical: i.semantic.typography.mono
   },
   // ── Icons ────────────────────────────────────────────────────────────────────
@@ -594,10 +683,21 @@ const o = "var(--primitive-typography-family-primary)", n = "var(--primitive-typ
     large: "var(--primitive-size-24)"
     // 24px — hero / large empty states
   },
-  // ── Density-aware spacing ────────────────────────────────────────────────────
-  // These vars respond to [data-density="compact"] on <html>.
-  // Use for component padding/gap that should tighten in compact mode.
-  // hds.space.px* for fixed measurements that never participate in density.
+  // ── Density-aware spacing (deprecated) ───────────────────────────────────────
+  // These vars respond to [data-density="compact"] on <html>, and so does
+  // semantic.space.scale.*, the one spacing vocabulary (hds#206). The same
+  // names mean different pixels here (density.sm is 8px, scale.sm is 16px),
+  // so this group is deprecated. Nothing in HDS reads it.
+  /**
+   * @deprecated hds#206 — use `hds.semantic.space.scale.*`, which compact density
+   * remaps too. Same pixels at both densities, one step down the name ladder:
+   * `density.sm` → `scale.xs`, `density.md` → `scale.sm`, `density.lg` → `scale.md`,
+   * `density.xl` → `scale.lg`, `density.xl2` → `scale.xl`. `density.xs` (4px),
+   * `density.xl3` (64px) and `density.xl4` (80px) have no scale step:
+   * `hds.space.px4` / `px64` / `px80` keep their comfortable pixels, without the
+   * compact remap.
+   * @removeIn 1.0.0
+   */
   density: {
     xs: "var(--hds-space-xs)",
     // 4px comfortable / 2px compact
@@ -620,7 +720,7 @@ const o = "var(--primitive-typography-family-primary)", n = "var(--primitive-typ
   // CSS var strings — valid in any inline style property that accepts a length.
   // Note: avoid interpolating these into template literal shorthand strings,
   // e.g. `margin: \`0 0 ${hds.space.px20}\`` — use individual properties instead.
-  // For component spacing that adapts to density, use hds.density.* instead.
+  // For component spacing that adapts to density, use hds.semantic.space.scale.* instead.
   space: {
     px1: "var(--primitive-space-px1)",
     px2: "var(--primitive-space-px2)",

package/dist/types/src/app/components/alert-dialog.d.ts

@@ -2,6 +2,7 @@
  * AlertDialog — modal confirmation dialog on Radix AlertDialog.
  * @category Overlays
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2035-24
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
  *
  * Radix AlertDialog (@radix-ui/react-alert-dialog) themed with the overlay role
@@ -58,6 +59,10 @@ interface AlertDialogComponent extends React.FC<React.ComponentProps<typeof Aler
 /**
  * AlertDialog root + parts. Controlled via `open`/`onOpenChange`, or
  * uncontrolled with `defaultOpen`.
+ * @usage Confirm a destructive or irreversible action (delete, archive, remove) before it runs, with Cancel and Action buttons.
+ * @whenNot A modal that collects input or shows content, or a confirmation after the action is done.
+ * @useInstead Dialog a modal with a form or other content
+ * @useInstead ToastProvider a brief confirmation after the action
  * @public
  */
 export declare const AlertDialog: AlertDialogComponent;

package/dist/types/src/app/components/asset-img.d.ts

@@ -3,6 +3,7 @@
  * Contexts: default, lightbox, and detail.
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2041-67
  */
 import { CSSProperties } from 'react';
 import type React from 'react';

package/dist/types/src/app/components/avatar-group.d.ts

@@ -2,6 +2,7 @@
  * AvatarGroup — an overlapping cluster of Avatars with an overflow count.
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2030-63
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
@@ -18,5 +19,4 @@ export interface AvatarGroupProps extends Omit<React.HTMLAttributes<HTMLDivEleme
 }
 /** Renders up to `max` overlapping avatars followed by a `+N` overflow chip. */
 export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
-/** @internal — CVA variant helper; compose via AvatarGroup props instead. */
-export { overflowBubbleVariants };
+export {};

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

@@ -2,7 +2,7 @@
  * Badge - compact feedback badge for neutral and semantic states.
  * @category Feedback
  * @tier primitive
- * @usage Label a status, state or count with a compact neutral or semantic chip.
+ * @usage Label a status, state or count with a compact neutral or semantic chip, or a dot.
  * @whenNot A chip people can toggle, or a message that needs a sentence.
  * @useInstead Tag an interactive filter or category chip
  * @useInstead Alert a message that needs a sentence
@@ -18,8 +18,13 @@ type BadgeVariantProps = VariantProps<typeof badgeVariants>;
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'style'>, BadgeVariantProps {
     /** Element rendered as the badge wrapper. Defaults to 'span'. */
     as?: React.ElementType;
+    /** Render a solid status dot with no text (children are ignored). */
+    dot?: boolean;
+    /** Dot diameter; used only with `dot`. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Names a `dot` badge: role="img" with this aria-label. Without it the dot is aria-hidden. A text badge ignores it: put the text in `children`. */
+    label?: string;
 }
 /** Compact metadata/status chip. Tone is the only styling input. */
 export declare const Badge: React.ForwardRefExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-/** @internal — CVA variant helper; compose via Badge props instead. */
-export { badgeVariants };
+export {};

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

@@ -2,6 +2,7 @@
  * Blockquote — quoted passage with an optional attribution.
  * @category Typography
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2024-18
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
@@ -16,5 +17,4 @@ export interface BlockquoteProps extends React.BlockquoteHTMLAttributes<HTMLQuot
 }
 /** A quoted passage; pass `cite` for the source URL and `attribution` for a byline. */
 export declare const Blockquote: React.ForwardRefExoticComponent<BlockquoteProps & React.RefAttributes<HTMLQuoteElement>>;
-/** @internal — CVA variant helper; compose via Blockquote props instead. */
-export { blockquoteVariants };
+export {};

package/dist/types/src/app/components/box-sx.d.ts

@@ -1,13 +1,19 @@
 /**
  * box-sx.ts — pure resolver + CSS injector for Box's `sx` prop.
  *
- * Deliberately dependency-free (no React import) so the resolver is unit
- * testable in isolation from the component tree. `box.tsx` is the only
- * consumer; it re-exports the types below as part of the public `Box` API.
+ * Deliberately React-free (its one import is the dev-only `warnOnce`) so the
+ * resolver is unit testable in isolation from the component tree. Its
+ * consumers: `box.tsx` re-exports the types below as part of the public `Box`
+ * API; `stack.tsx` resolves its `gap` through `resolveSpacingValue`, the one
+ * spacing resolver (hds#206); and the layout components (Grid, Sidebar,
+ * Switcher, Card) resolve theirs through it against `LAYOUT_GAP`, the one copy
+ * of the layout-gap names (hds#404).
  *
  * @internal — the resolver internals (`resolveSx`, `sxClassName`, `injectSx`)
- * are exported for testing but the supported public surface is `Box` + the
- * `Sx*` types, both re-exported from `box.tsx`.
+ * are exported for testing, and `resolveSpacingValue`, `SpacingVocabulary`,
+ * `SPACE_SCALE`, `LAYOUT_GAP_NAMES` and `LAYOUT_GAP` for the components. The
+ * supported public surface is `Box` + the `Sx*` types, both re-exported from
+ * `box.tsx`.
  */
 export declare const BOX_BREAKPOINTS: {
     readonly xs: 375;
@@ -29,18 +35,108 @@ export type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>;
 export interface SxObject {
     [key: string]: ResponsiveValue<SxValue> | SxObject | undefined;
 }
+/** The canonical t-shirt scale, `semantic.space.scale.{xs,sm,md,lg,xl}` (hds#206). */
+export declare const SPACE_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)";
+};
+/**
+ * The names a spacing prop accepts, and what any other value means there.
+ *
+ * An open vocabulary passes any other string through ('auto', '1rem', a
+ * `var()`) and reads a number by `numbers`: `'units'` is a count of 4px
+ * units (Box `sx`), `'raw'` returns the number as-is for React's inline
+ * style to read as px (Stack and Card `gap`).
+ *
+ * A closed vocabulary resolves its own names and nothing else: any other
+ * value, a number included, resolves to `undefined`, so the prop sets no
+ * style. That is what the layout components rendered before hds#404, when
+ * each looked a value up in a private map.
+ */
+export type SpacingVocabulary = {
+    readonly names: Readonly<Record<string, string>>;
+    readonly numbers: 'units' | 'raw';
+} | {
+    readonly names: Readonly<Record<string, string>>;
+    readonly closed: true;
+};
+type OpenSpacingVocabulary = Extract<SpacingVocabulary, {
+    readonly numbers: unknown;
+}>;
+type ClosedSpacingVocabulary = Extract<SpacingVocabulary, {
+    readonly closed: true;
+}>;
+/**
+ * The layout-gap names (hds#404): the only copy of the four names the layout
+ * components take for a gap, a gutter or a bleed, with the same values as
+ * Stack's `gap`:
+ *
+ *   tight    → var(--semantic-space-scale-sm)
+ *   normal   → var(--semantic-space-scale-md)
+ *   inset    → var(--semantic-space-scale-lg)
+ *   spacious → var(--semantic-space-scale-xl)
+ *
+ * They read the scale steps, so compact density tightens them. Box `sx`'s
+ * deprecated names of the same spelling read the fixed layout vars instead
+ * (BOX_SX_SPACING below). scripts/check-layout-gap-vocabulary.mjs fails a
+ * second copy anywhere else in src/.
+ */
+export declare const LAYOUT_GAP_NAMES: {
+    readonly tight: "var(--semantic-space-scale-sm)";
+    readonly normal: "var(--semantic-space-scale-md)";
+    readonly inset: "var(--semantic-space-scale-lg)";
+    readonly spacious: "var(--semantic-space-scale-xl)";
+};
+/**
+ * Grid, Sidebar and Switcher `gap` (Cluster, Cover, Bleed and Center, which
+ * read it too, went in 0.20.0, hds#394): the four layout-gap names, plus
+ * `medium` (hds#393), and nothing else. Closed, so an untyped value sets no style, as it did before
+ * hds#404 (scripts/__tests__/spacing-computed-lock.test.mjs).
+ *
+ * `medium` is the 12px default gap of TileGrid (removed in 0.20.0, hds#395),
+ * `semantic.space.component.medium`, the step Stack's `medium` reads. Unlike
+ * the four names it is fixed: compact density does not remap it, as it did not
+ * remap TileGrid's 12px. Only
+ * Grid's `gap` type takes it so far. It stays out of LAYOUT_GAP_NAMES, so
+ * Card and Stack, which spread those names, do not change.
+ */
+export declare const LAYOUT_GAP: {
+    names: {
+        medium: string;
+        tight: "var(--semantic-space-scale-sm)";
+        normal: "var(--semantic-space-scale-md)";
+        inset: "var(--semantic-space-scale-lg)";
+        spacious: "var(--semantic-space-scale-xl)";
+    };
+    closed: true;
+};
+/**
+ * The one spacing resolver for Box `sx`, Stack `gap` and the layout
+ * components. A name is looked up in the caller's vocabulary (own keys only,
+ * so 'constructor' is not a name). Anything else ('auto', '1rem', a `var()`)
+ * passes through an open vocabulary and resolves to `undefined` in a closed
+ * one. The return type says which: an open vocabulary never yields
+ * `undefined`, so Box cannot emit `margin:undefined`, and a closed one never
+ * yields a number.
+ */
+export declare function resolveSpacingValue(value: SxValue, vocabulary: OpenSpacingVocabulary): string | number;
+export declare function resolveSpacingValue(value: SxValue, vocabulary: ClosedSpacingVocabulary): string | undefined;
+export declare function resolveSpacingValue(value: SxValue, vocabulary: SpacingVocabulary): string | number | undefined;
 /**
  * Resolves an `SxObject` into an ordered array of standalone, top-level CSS
  * rule strings ready for individual `CSSStyleSheet.insertRule()` calls.
  *
- * Pure — no DOM access. Order: base (non-responsive) rules for every selector
- * encountered (outer class first, then each `&`-selector in declaration
- * order), followed by `@media (min-width: …)` blocks in ascending breakpoint
- * order. Each media block is ONE rule string containing its inner selector
- * rules concatenated as plain text — that concatenation is safe (and
- * required) because a single `insertRule()` call for an `@media {...}` block
- * is one rule; only top-level rule concatenation breaks `insertRule()` (see
- * `injectSx` below).
+ * Pure apart from a dev-only deprecation warning; no DOM access. Order: base
+ * (non-responsive) rules for every selector encountered (outer class first,
+ * then each `&`-selector in declaration order), followed by
+ * `@media (min-width: …)` blocks in ascending breakpoint order. Each media
+ * block is ONE rule string containing its inner selector rules concatenated
+ * as plain text — that concatenation is safe (and required) because a single
+ * `insertRule()` call for an `@media {...}` block is one rule; only top-level
+ * rule concatenation breaks `insertRule()` (see `injectSx` below).
  */
 export declare function resolveSx(sx: SxObject, className: string): string[];
 /** Deterministic class name for an sx object — identical objects (by value) share one class/hash. */
@@ -67,3 +163,4 @@ export declare function sxClassName(sx: SxObject): string;
 export declare function injectSx(sx: SxObject): string;
 /** @internal test-only — clears the injection cache and managed stylesheet between test runs. */
 export declare function __resetBoxSxForTests(): void;
+export {};

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

@@ -16,9 +16,12 @@
  * keys, not raw hex/px. Prefer named layout primitives over ad-hoc flex.
  *
  * `sx` is a deliberate SUBSET of MUI's sx — not all of CSS-in-JS is a feature:
- *   - Spacing shorthands (m/p/gap family) resolve numbers off the 4px HDS scale
- *     (`--primitive-space-<n>`) and named steps ('tight'|'normal'|'inset'|'spacious')
- *     off `--semantic-space-layout-*`.
+ *   - Spacing shorthands (m/p/gap family) take the t-shirt scale
+ *     ('xs'|'sm'|'md'|'lg'|'xl' → `--semantic-space-scale-*`, hds#206) through the
+ *     resolver Stack's `gap` shares. Numbers still resolve as a count of 4px units
+ *     (`p: 4` is 16px), and the deprecated 'tight'|'normal'|'inset'|'spacious' still
+ *     read `--semantic-space-layout-*`, fixed px that compact density does not
+ *     remap. HDS source may not use raw integers (check-spacing-vocabulary).
  *   - `color`/`bgcolor`/`borderColor`/`fill`/`stroke` resolve dotted token keys
  *     ('content.primary', 'surface.raised', 'border.subtle', 'accent',
  *     'accent.hover', 'feedback.success', …) to the matching semantic CSS var.

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

@@ -9,9 +9,6 @@
  * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159
  */
 import * as React from 'react';
-declare const crumbLabelVariants: (props?: ({
-    current?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export interface BreadcrumbItem {
     /** Visible label for the crumb. */
@@ -32,5 +29,3 @@ export interface BreadcrumbProps extends Omit<React.HTMLAttributes<HTMLElement>,
  * is marked aria-current="page".
  */
 export declare const Breadcrumb: React.ForwardRefExoticComponent<BreadcrumbProps & React.RefAttributes<HTMLElement>>;
-/** @internal — CVA variant helper; compose via Breadcrumb instead. */
-export { crumbLabelVariants };

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

@@ -7,6 +7,30 @@
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
+/**
+ * Pressed state (hds#322): an inset box-shadow wash bound to
+ * `role.pressed-overlay` (`semantic.color.state.pressed.overlay`: black in
+ * light, white in dark; the 5% alpha lives in the class, like `bg-scrim/60`),
+ * not the brightness filter it replaces (95% in light, 110% in dark), which
+ * had no token behind it and no Figma equivalent. Why an inset shadow and not
+ * a pseudo-element: Tailwind v4 composes `--tw-inset-shadow` with the
+ * `focus-visible:ring-*` and any consumer `shadow-*` into one `box-shadow`
+ * list, so the focus ring, an outer shadow and the press wash all render at
+ * once with no `relative`/`after:` classes and no extra DOM; the
+ * `inset-shadow-[0_0_0_9999px]` spread fills the padding box, so it works on
+ * a transparent tertiary fill and respects the radius. `disabled:pointer-events-none`
+ * keeps a disabled control from ever matching `:active`. The wash snaps on
+ * and off (`transition-[colors,filter]` is unchanged: the tone variants still
+ * hover through the brightness filter), which is also how the Figma Pressed
+ * variant behaves. Without `color-mix()` support the fallback is the opaque
+ * token, the same fallback Tailwind emits for `bg-scrim/60`.
+ *
+ * Toggled on (`pressed`, hds#393) is a different state from that momentary
+ * wash: `data-pressed="true"` fills with `role.accent` and its foreground,
+ * the on-state a toggle needs, so it reads as on at rest, not only mid-click.
+ * Only toggle buttons get these classes, so every other Button renders the
+ * same markup as before.
+ */
 declare const buttonVariants: (props?: ({
     variant?: "primary" | "secondary" | "tertiary" | null | undefined;
     tone?: "success" | "danger" | "warning" | "info" | "neutral" | null | undefined;
@@ -16,6 +40,8 @@ declare const buttonVariants: (props?: ({
 type ButtonVariantProps = VariantProps<typeof buttonVariants>;
 /** @public */
 export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>, Omit<ButtonVariantProps, 'iconOnly'> {
+    /** Visual treatment: `primary`, `secondary` or `tertiary`. Defaults to `secondary` (an outline), so pass `primary` for the main action. */
+    variant?: ButtonVariantProps['variant'];
     /** Render the button chrome onto a single child element for link semantics. */
     asChild?: boolean;
     /** Optional accessible label used when children are not suitable as the name. */
@@ -26,17 +52,22 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     iconLeft?: React.ReactNode;
     /** Trailing icon rendered after the label. */
     iconRight?: React.ReactNode;
-    /** Render the button as a square icon-only control. Requires aria-label. */
+    /** Render a square icon-only control; `label` becomes its aria-label. */
     iconOnly?: boolean;
     /** Disable interaction. Mirrors the native HTML attribute. */
     disabled?: boolean;
+    /** Make it a toggle button (aria-pressed), controlled. */
+    pressed?: boolean;
+    /** Initial toggle state when `pressed` is not set. */
+    defaultPressed?: boolean;
+    /** Called with the next pressed state on click. */
+    onPressedChange?: (pressed: boolean) => void;
 }
 /**
  * Triggers an action when activated.
- * @usage Trigger an action (submit, save, open a dialog) with a text label and optional icons; for an icon-only control pass iconOnly with iconLeft.
+ * @usage Trigger an action (submit, save, open a dialog) with a text label and optional icons; for an icon-only control pass iconOnly with iconLeft and label; for an on/off toggle pass pressed.
  * @whenNot Navigating to another page, where a link is the correct element.
  * @useInstead InlineLink navigation to another page
  */
 export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
-/** @internal — CVA variant helper; compose via Button props instead. */
-export { buttonVariants };
+export {};