@hirobius/design-system 0.20.0 → 0.22.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",
@@ -258,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)",
@@ -302,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)",
@@ -538,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 ────────────────────────────────────────────────────────────────────

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?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/alert.d.ts

@@ -6,7 +6,7 @@
  * @whenNot A brief confirmation that should disappear on its own, or a status label.
  * @useInstead ToastProvider a brief confirmation that fades away
  * @useInstead Badge a short status label
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=33-34
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=33-34
  */
 import React from 'react';
 type AlertTone = 'success' | 'danger' | 'warning' | 'info';

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?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?node-id=2030-63
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -6,7 +6,7 @@
  * @whenNot A generic pictogram, or a status marker.
  * @useInstead Icon a generic pictogram
  * @useInstead Badge a status marker
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=34-18
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=34-18
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -6,7 +6,7 @@
  * @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
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=31-15
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=31-15
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';
@@ -22,7 +22,7 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>,
     dot?: boolean;
     /** Dot diameter; used only with `dot`. */
     size?: 'sm' | 'md' | 'lg';
-    /** Names the dot: role="status" with this aria-label. Without it the dot is aria-hidden. */
+    /** 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. */

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?node-id=2024-18
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -6,7 +6,7 @@
  * @whenNot Switching between sibling views, or stepping through pages of results.
  * @useInstead Tabs switching between sibling views
  * @useInstead Pagination stepping through pages of results
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-159
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-159
  */
 import * as React from 'react';
 /** @public */

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

@@ -1,7 +1,7 @@
 /**
  * @category Actions
  * @tier primitive
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=28-138
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=28-138
  * @figma Variant=Button/Variant
  * @figma Size=Button/Size
  */
@@ -40,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. */

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

@@ -1,7 +1,7 @@
 /**
  * @category Feedback
  * @tier primitive
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-85
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-85
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -22,7 +22,7 @@
  *   zone (right-aligned, holds <Badge> / <Tag> for status, never raw spans).
  * - Progress: full-width 4px bar in a reserved 16px vertical rail. Owns its
  *   spacing — never crowds adjacent prose.
- * - Metric: single label-uppercase + big value (h2) + optional sub-line.
+ * - Metric: single label + big value (title) + optional sub-line.
  *   Reserved vertical block. Use multiple side-by-side via flex/grid container.
  * - Body: prose, lists, structured content. NO inline status, progress, or
  *   thin colored bars. Group sections via separate <Card.Body> blocks.
@@ -130,15 +130,16 @@ export interface CardMetricProps extends React.HTMLAttributes<HTMLDivElement> {
     tone?: CardTone;
 }
 /**
- * Card.Metric — one uppercase label, a large value and an optional sub-line inside a Card.
+ * Card.Metric — one label, a large value and an optional sub-line inside a Card.
  * @usage Show one headline figure (a KPI, a count, a total) with its label inside a Card.
  * @whenNot A metric outside a Card, or several figures that share one label.
+ * @useInstead MetricTiles a row of headline numbers with no enclosing Card
  */
 declare const CardMetric: React.ForwardRefExoticComponent<CardMetricProps & React.RefAttributes<HTMLDivElement>>;
 /**
  * Tagged per-export, not on the file block: this module exports eight
  * components and a file-level @figma would hand all eight this one node.
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=39-11
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=39-11
  * @usage Group related content on a raised surface with header, body, footer and metric slots, or as one selectable option.
  * @whenNot A bare padded background with no slot anatomy, or a single headline figure.
  * @useInstead Surface a padded background without slot anatomy

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

@@ -6,7 +6,7 @@
  * @whenNot An immediate on/off setting, or a choice of exactly one option from a set.
  * @useInstead Toggle a setting that applies as soon as it flips
  * @useInstead Radio exactly one choice from a set
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=35-29
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=35-29
  */
 import type { InputHTMLAttributes } from 'react';
 /** Checkbox — custom-drawn checkbox with check / indeterminate glyph. */

package/dist/types/src/app/components/code-block.d.ts

@@ -2,7 +2,7 @@
  * CodeBlock - code display with copy button and optional collapsible toggle.
  * @category Display
  * @tier primitive
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-154
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-154
  */
 declare const blockContainerVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 declare const inlineWrapperVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;

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

@@ -12,7 +12,7 @@
  * @keyboard Enter Commits the active option and closes the list; with `multiple`, toggles it and keeps the list open.
  * @keyboard Escape Closes the list.
  * @keyboard Tab Stays inside the open list.
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-237
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-237
  * @doc-exempt: no Inputs-overlay doc page yet — add demo when created
  *
  * A select-with-search built on the HDS Popover. The trigger shows the current

package/dist/types/src/app/components/data-table-section.d.ts

@@ -2,6 +2,7 @@
  * DataTableSection - a titled table with a toolbar, row actions and an empty state.
  * @category Display
  * @tier pattern
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-268
  */
 import * as React from 'react';
 import { type TableColumn } from './table.js';

package/dist/types/src/app/components/destructive-section.d.ts

@@ -2,6 +2,7 @@
  * DestructiveSection - the one place a screen puts an irreversible action.
  * @category Actions
  * @tier pattern
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2076-3
  */
 import * as React from 'react';
 /** @public */

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

@@ -84,6 +84,7 @@ interface DialogComponent extends React.FC<DialogProps> {
  * @useInstead Tooltip a short hint on hover or focus
  * @useInstead Alert a message that needs no reply
  * @useInstead ToastProvider a brief confirmation
+ * @useInstead AlertDialog confirming a destructive or irreversible action
  * @slot trigger The element that opens the dialog (Dialog.Trigger).
  * @slot overlay The scrim that dims the page behind the dialog (Dialog.Overlay).
  * @slot surface The modal surface (Dialog.Content).
@@ -96,7 +97,7 @@ interface DialogComponent extends React.FC<DialogProps> {
  * @keyboard Escape Closes the dialog and returns focus to the trigger.
  * @keyboard Tab Cycles focus inside the open dialog.
  * @keyboard Shift+Tab Cycles focus backwards inside the open dialog.
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-27
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-27
  */
 export declare const Dialog: DialogComponent;
 export { DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, DialogClose, };

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

@@ -5,7 +5,7 @@
  * @usage Hide optional explanatory content behind a heading that people can expand.
  * @whenNot Content people must see, or switching between panels.
  * @useInstead Tabs switching between panels of content
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-453
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-453
  */
 import React, { type CSSProperties, type ReactNode } from 'react';
 type DisclosureVariant = 'panel' | 'nav' | 'card';

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

@@ -6,7 +6,7 @@
  * @whenNot Spacing alone would do, or the separation needs a container.
  * @useInstead Stack gap-based spacing between siblings
  * @useInstead Surface a bounded region with its own background
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-26
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-26
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

package/dist/types/src/app/components/empty-state.d.ts

@@ -6,7 +6,7 @@
  * @whenNot Content that is still loading, or a full-page error.
  * @useInstead Skeleton content that is still loading
  * @useInstead Alert a message about something that went wrong
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-352
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-352
  * @ai-intent Inline empty-state placeholder so any list, grid, or section can
  *   communicate "no data yet" with consistent muted typography instead of agents
  *   inventing one-off `<p>No items.</p>` lines.

package/dist/types/src/app/components/error-pattern.d.ts

@@ -3,8 +3,13 @@ export type ErrorPatternProps = {
     displayText?: string;
     /** Supporting message explaining the recovery state to the user. */
     message?: string;
+    /**
+     * Fill the viewport height and centre the surface in it, for a routed error page.
+     * Off by default: the pattern then fits its container and never exceeds it.
+     */
+    fullPage?: boolean;
 };
 /**
  * @public
  */
-export declare function ErrorPattern({ displayText, message, }: ErrorPatternProps): import("react/jsx-runtime").JSX.Element;
+export declare function ErrorPattern({ displayText, message, fullPage, }: ErrorPatternProps): import("react/jsx-runtime").JSX.Element;

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

@@ -5,7 +5,7 @@
  * @whenNot Editable input, or a single headline figure.
  * @useInstead Input an editable single-line value
  * @useInstead Card.Metric a headline figure inside a Card
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-81
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-81
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

package/dist/types/src/app/components/form-actions.d.ts

@@ -2,6 +2,7 @@
  * FormActions - the footer row of a form: primary right-most, secondary to its left.
  * @category Actions
  * @tier pattern
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-87
  */
 import * as React from 'react';
 /** @public */

package/dist/types/src/app/components/form-control.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Shared width contract for text-entry form controls (Input, Textarea, Select,
+ * Combobox, Slider): they fill their container up to a maximum, so a field in
+ * a wide Surface does not stretch to 1152px (hds#522).
+ *
+ * The cap is 40rem by default. Override it per tree or per control by setting
+ * the `--hds-form-control-max-width` custom property (any CSS length, or
+ * `none`), or pass `className="max-w-none"` where the control takes one.
+ */
+export declare const FORM_CONTROL_WIDTH = "w-full max-w-[var(--hds-form-control-max-width,40rem)]";

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

@@ -37,7 +37,7 @@ export type FormProps = React.FormHTMLAttributes<HTMLFormElement>;
  *
  * Tagged per-export: FormField and FormFieldShell share this module and have no
  * Figma node, so a file-level @figma would claim this one for all three.
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=85-94
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=85-94
  */
 export declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
 /** @public */

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

@@ -50,6 +50,11 @@ export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     style?: CSSProperties;
     /** Escape hatch: only use when tokenized props cannot express the required wrapper class. */
     className?: string;
+    /**
+     * Cross-axis alignment of items in a row. Defaults to 'start': items hug their
+     * own height. Pass 'stretch' where a row of tiles must share one height.
+     */
+    align?: 'start' | 'center' | 'end' | 'stretch';
     /** Element rendered as the outer wrapper. Defaults to 'div'. */
     as?: React.ElementType;
 }

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

@@ -2,7 +2,7 @@
  * Tooltip — accessible hover/focus tooltip on Radix (Overlays).
  * @category Overlays
  * @tier primitive
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-15
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-15
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
  *
  * Radix Tooltip (@radix-ui/react-tooltip) themed with role tokens. Provides

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

@@ -2,6 +2,7 @@
  * Icon — semantic icon wrapper for Lucide icons.
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2
  * @usage Draw a Lucide glyph at a size and colour from the design tokens.
  * @whenNot A control someone can activate, or a picture that carries content.
  * @useInstead Button a clickable control, with iconOnly for an icon-only one

package/dist/types/src/app/components/inline-link.d.ts

@@ -6,7 +6,7 @@
  * @whenNot An action that changes something, or a control that needs button styling.
  * @useInstead Button an action or a link that needs button styling
  * @useInstead Text unlinked body copy
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-161
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-161
  */
 import React from 'react';
 export interface InlineLinkProps {

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

@@ -7,7 +7,7 @@
  * @useInstead Textarea multi-line text
  * @useInstead Select a short fixed list
  * @useInstead Combobox a long fixed list that needs search
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=38-20
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=38-20
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -2,6 +2,7 @@
  * Kbd — inline keyboard key / shortcut hint rendered as a native <kbd>.
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2026-9
  * @usage Show a keyboard key or shortcut hint inline, as a native kbd element.
  * @whenNot Code samples, or a control that runs the shortcut.
  * @useInstead Text inline code and other typography

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

@@ -2,7 +2,7 @@
  * Menu — dropdown menu (shadcn baseline, compound parts).
  * @category Overlays
  * @tier primitive
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-59
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-59
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
  *
  * Radix DropdownMenu (@radix-ui/react-dropdown-menu) themed with the overlay

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

@@ -3,6 +3,7 @@
  * Owner, Updated…). The idiomatic replacement for badge-stickers-on-prose.
  * @category Display
  * @tier pattern
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47
  * @public
  */
 import * as React from 'react';