@hirobius/design-system 0.20.0 → 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",
@@ -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-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';

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

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

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

@@ -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/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,9 +130,10 @@ 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>>;
 /**

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-Copy?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-Copy?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).

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/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-Copy?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/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/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-Copy?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/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-Copy?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/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-Copy?node-id=2041-47
  * @public
  */
 import * as React from 'react';

package/dist/types/src/app/components/metric-tiles.d.ts

@@ -22,6 +22,7 @@ export interface MetricTileProps extends Omit<React.HTMLAttributes<HTMLDivElemen
  * surface at one fixed min-height. Wraps `Card.Metric` (the sibling with the
  * eyebrow / h2 / caption scale) and adds the surface and the fixed height, so a
  * tile needs no enclosing `Card`.
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2075-114
  */
 export declare const MetricTile: React.ForwardRefExoticComponent<MetricTileProps & React.RefAttributes<HTMLDivElement>>;
 /** @public */

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

@@ -15,7 +15,7 @@ declare const progressTrackVariants: (props?: ({
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const PROGRESS_TONES: {
     readonly neutral: {
-        readonly bar: "bg-accent";
+        readonly bar: "bg-primary";
         readonly ring: "text-primary";
     };
     readonly danger: {

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

@@ -18,7 +18,7 @@ type SkeletonVariantProps = VariantProps<typeof skeletonVariants>;
 export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement>, SkeletonVariantProps {
     /** Explicit width (number → px, or any CSS length). */
     width?: number | string;
-    /** Explicit height (number → px, or any CSS length). For `text`, defaults to 1em. */
+    /** Explicit height (number → px, or any CSS length). For `text`, defaults to 1em; for `rectangular`, 5rem. */
     height?: number | string;
 }
 /**

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

@@ -16,9 +16,10 @@ export interface StatProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'c
     sub?: React.ReactNode;
 }
 /**
- * Headline metric — large value, uppercase caption label, optional sub-line.
- * @usage Show one standalone headline figure with its label and an optional sub-line.
- * @whenNot A figure inside a Card, or a status with a trailing badge.
+ * Headline metric — large value, caption label, optional sub-line.
+ * @usage Show one headline figure inline, inside prose or a dense list, with its label and an optional sub-line.
+ * @whenNot A row of headline numbers on a screen, a figure inside a Card, or a status with a trailing badge.
+ * @useInstead MetricTiles a row of headline numbers (one MetricTile per number)
  * @useInstead Card.Metric a figure inside a Card (hds#254 folds Stat into the Card slot)
  * @useInstead StatusTile a titled status with notes and a trailing badge
  */

package/dist/types/src/app/components/status-tile.d.ts

@@ -20,8 +20,9 @@ export interface StatusTileProps extends Omit<React.HTMLAttributes<HTMLDivElemen
  * — every tile should look the same so feedback signals stay reserved for
  * genuinely interrupting states.
  * @usage Show a titled status block with optional notes and a trailing badge or affordance.
- * @whenNot A single headline figure, or a row inside a list.
- * @useInstead Card.Metric a headline figure (hds#254 folds StatusTile into the Card slot)
+ * @whenNot A headline number (never a value), or a row inside a list.
+ * @useInstead MetricTiles a row of headline numbers
+ * @useInstead Card.Metric a headline figure inside a Card (hds#254 folds StatusTile into the Card slot)
  * @useInstead StatusListItem a status row inside a list
  */
 export declare const StatusTile: React.ForwardRefExoticComponent<StatusTileProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -75,6 +75,11 @@ export declare function Table({ columns, rows, caption, captionAction, descripti
      * default, compact inside `[data-density="compact"]`); pass a value to fix it.
      */
     density?: TableDensity;
+    /**
+     * Drop the scroll region's own inset. On by default: every cell already carries the
+     * surface inset, so a padded region doubled it (48px at the edges, hds#522). Pass
+     * `flush={false}` to restore the extra region padding.
+     */
     flush?: boolean;
     stickyHeader?: boolean;
 }): import("react/jsx-runtime").JSX.Element;

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

@@ -3,6 +3,7 @@
  *
  * @category Typography
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2022-31
  * @usage Set any text on the type ramp, with the element chosen by `as`.
  * @whenNot Navigation links, or a keyboard hint.
  * @useInstead InlineLink a link inside body copy
@@ -10,12 +11,58 @@
  * @doc-exempt: typography primitive is documented through the Typography ramp page (TypographyPage), not as a standalone component card
  */
 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" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type TextVariantProps = VariantProps<typeof textVariants>;
-type TextVariant = NonNullable<TextVariantProps['variant']>;
+/** The six roles of the type ramp, plus the deprecated names that still resolve. */
+export type TextVariant = 'display' | 'title' | 'body' | 'ui' | 'caption' | 'mono'
+/**
+ * @deprecated hds#483 — use `title`.
+ * @removeIn 1.0.0
+ */
+ | 'heading1'
+/**
+ * @deprecated hds#483 — use `title`.
+ * @removeIn 1.0.0
+ */
+ | 'heading2'
+/**
+ * @deprecated hds#483 — use `title`.
+ * @removeIn 1.0.0
+ */
+ | 'heading3'
+/**
+ * @deprecated hds#483 — use `mono`.
+ * @removeIn 1.0.0
+ */
+ | 'technical'
+/**
+ * @deprecated hds#483 — use `caption`.
+ * @removeIn 1.0.0
+ */
+ | 'eyebrow'
+/**
+ * @deprecated hds#483 — use `caption`.
+ * @removeIn 1.0.0
+ */
+ | 'badge'
+/**
+ * @deprecated hds#483 — use `body`.
+ * @removeIn 1.0.0
+ */
+ | 'docLede'
+/**
+ * @deprecated hds#483 — use `body`.
+ * @removeIn 1.0.0
+ */
+ | 'docBody'
+/**
+ * @deprecated hds#483 — use `ui`.
+ * @removeIn 1.0.0
+ */
+ | 'docSmall'
+/**
+ * @deprecated hds#483 — use `mono`.
+ * @removeIn 1.0.0
+ */
+ | 'docCode';
 type TextTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
 /** @public */
 export type TextProps = {

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

@@ -2,6 +2,7 @@
  * Timestamp — renders a date/time as a semantic <time> element.
  * @category Display
  * @tier primitive
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2031-11
  */
 import * as React from 'react';
 /** @public */

package/dist/types/src/app/data/manifest-types.d.ts

@@ -78,6 +78,8 @@ export type ManifestComponentSpec = {
     hidden?: boolean;
     docExempt?: boolean;
     tier?: string;
+    /** In the ratified core set (hds#254, ADR-031). Present only as `true`; independent of `tier`. */
+    core?: true;
     stability?: 'stable' | 'beta';
     consumers?: string[];
     tokenMapping?: Record<string, string>;
@@ -129,6 +131,8 @@ export type ManifestApiComponent = {
     hidden?: boolean;
     figmaUrl?: string | null;
     description?: string;
+    /** In the ratified core set (hds#254, ADR-031). Present only as `true`. */
+    core?: true;
     usage?: ManifestUsage;
     keyboard?: ManifestKeyboardEntry[];
     aiRules?: string;