@hirobius/design-system 0.21.0 → 0.23.0

package/dist/tokens.js

@@ -42,6 +42,19 @@ const a = {
         700: "#047857",
         950: "#022c22"
       },
+      apple: {
+        50: "#f2faeb",
+        100: "#e2f3cf",
+        200: "#c7e7a4",
+        300: "#a6d873",
+        400: "#85c84c",
+        500: "#66b239",
+        600: "#54922d",
+        700: "#416f20",
+        800: "#34571b",
+        900: "#2b4518",
+        950: "#16250c"
+      },
       violet: {
         50: "#f5f3ff",
         400: "#a78bfa",
@@ -122,7 +135,7 @@ const a = {
       family: {
         primary: ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
         display: ["Satoshi", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "sans-serif"],
-        mono: ["Geist Mono", "Courier New", "monospace"]
+        mono: ["IBM Plex Mono", "Courier New", "monospace"]
       },
       size: {
         xs: "12px",

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

@@ -2,7 +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
+ * @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

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

@@ -2,8 +2,9 @@
  * AssetImg - responsive asset frame with fallback placeholder handling.
  * Contexts: default, lightbox, and detail.
  * @category Display
+ * @usage Show an image that scales to its frame, with a placeholder if it fails to load.
  * @tier primitive
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2041-67
+ * @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,7 +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
+ * @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';

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

@@ -2,7 +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
+ * @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
  */
@@ -65,7 +65,7 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
 }
 /**
  * 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 and label; for an on/off toggle pass pressed.
+ * @usage Run an action, such as submit, save or open a dialog. For an icon-only control pass iconOnly, 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
  */

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';
@@ -18,7 +18,8 @@ export interface CalloutProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
     italic?: boolean;
 }
 /**
- * Tone-driven side-rule callout for status, quotes, hypotheses.
+ * Tone-driven tinted callout for notes, quotes, hypotheses — the same feedback
+ * fill language as Alert, without Alert's icon or status role.
  */
 export declare const Callout: React.ForwardRefExoticComponent<CalloutProps & React.RefAttributes<HTMLDivElement>>;
 export default Callout;

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

@@ -39,9 +39,11 @@
  * Existing callers that pass raw children continue to work; new callers
  * should prefer compound parts + `padding="none"`.
  *
- * Depth comes from semantic.color.border.default (role.border) at rest;
- * elevation tokens are not bound by default — pass `className="shadow-..."`
- * for a hover/floating treatment on interactive cards.
+ * The default variant is BORDERLESS at rest (12d-3 outline rule) — depth comes
+ * from whitespace/dividers, not an edge. A resting 1px border is opt-in via
+ * `bordered` (border.default), a feedback `tone`, or `accent` (border.accent).
+ * Elevation tokens are not bound by default — pass `className="shadow-..."` for
+ * a hover/floating treatment on interactive cards.
  */
 import * as React from 'react';
 import hds from '../design-system/tokens.js';
@@ -139,7 +141,7 @@ declare const CardMetric: React.ForwardRefExoticComponent<CardMetricProps & Reac
 /**
  * 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

@@ -1,8 +1,9 @@
 /**
  * CodeBlock - code display with copy button and optional collapsible toggle.
  * @category Display
+ * @usage Show a code sample with a copy button, optionally collapsed.
  * @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

@@ -7,12 +7,12 @@
  * @useInstead Select a short list without search
  * @useInstead Menu firing actions from a trigger
  * @keyboard Enter/Space Opens the list from the trigger and moves focus to the search field.
- * @keyboard ArrowDown/ArrowUp Moves the active option and wraps at the ends.
+ * @keyboard ArrowDown/ArrowUp Moves the active option, skipping disabled ones, and wraps at the ends.
  * @keyboard Character Filters the options to those matching the typed text.
  * @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

@@ -1,8 +1,9 @@
 /**
  * DataTableSection - a titled table with a toolbar, row actions and an empty state.
  * @category Display
+ * @usage Put a heading and toolbar above a Table.
  * @tier pattern
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2075-268
+ * @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

@@ -1,8 +1,9 @@
 /**
  * DestructiveSection - the one place a screen puts an irreversible action.
  * @category Actions
+ * @usage Put a dangerous action, such as delete, in its own section with a warning and a confirm step.
  * @tier pattern
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2076-3
+ * @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

@@ -97,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

@@ -2,11 +2,11 @@
  * Divider — semantic separator between content regions.
  * @category Layout
  * @tier primitive
- * @usage Separate two regions of content with a thin semantic rule.
+ * @usage Separate two blocks of content with a thin line.
  * @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/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

@@ -1,8 +1,9 @@
 /**
  * FormActions - the footer row of a form: primary right-most, secondary to its left.
  * @category Actions
+ * @usage Lay out a form's buttons in a fixed order: danger on the left, then secondary, then primary on the right.
  * @tier pattern
- * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components-Copy?node-id=2075-87
+ * @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.d.ts

@@ -34,10 +34,11 @@ import * as React from 'react';
 export type FormProps = React.FormHTMLAttributes<HTMLFormElement>;
 /**
  * Styled `<form>` with consistent vertical field rhythm.
+ * @usage Wrap form fields so they stack with even spacing.
  *
  * 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

@@ -2,7 +2,7 @@
  * Grid — responsive grid composition primitive.
  * @category Layout
  * @tier primitive
- * @usage Lay out content in responsive columns with token-governed gaps, or align nested content with subgrid.
+ * @usage Lay out content in columns that adapt to the screen width, or line up nested content with subgrid.
  * @whenNot A single row or column, or styling a surface.
  * @useInstead Stack a single row or column
  * @useInstead Box one-off layout that no named primitive covers

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,8 +2,8 @@
  * 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.
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=27-2
+ * @usage Show a Lucide icon at a set size and color.
  * @whenNot A control someone can activate, or a picture that carries content.
  * @useInstead Button a clickable control, with iconOnly for an icon-only one
  * @useInstead Avatar a picture of a person or entity

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,7 +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
+ * @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,7 +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
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2041-47
  * @public
  */
 import * as React from 'react';

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

@@ -1,6 +1,7 @@
 /**
  * MetricTiles - the default row of headline numbers on a screen.
  * @category Display
+ * @usage Show a row of key numbers, one tile each.
  * @tier pattern
  */
 import * as React from 'react';
@@ -22,7 +23,8 @@ 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
+ * @usage Show one key number with its label, inside a MetricTiles row.
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=2075-114
  */
 export declare const MetricTile: React.ForwardRefExoticComponent<MetricTileProps & React.RefAttributes<HTMLDivElement>>;
 /** @public */

package/dist/types/src/app/components/page-header.d.ts

@@ -1,6 +1,7 @@
 /**
  * PageHeader - the one header every screen opens with.
  * @category Layout
+ * @usage Open a screen with its title, plus optional breadcrumb, status and actions.
  * @tier pattern
  */
 import * as React from 'react';

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

@@ -1,6 +1,7 @@
 /**
  * Page — standard page shell.
  * @category Layout
+ * @usage Wrap a screen in the standard width and padding.
  * @tier primitive
  *
  * Wraps page content in Container (width constraint) and applies the

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

@@ -5,7 +5,7 @@
  * @usage Move between pages of a long result set, with truncated page numbers.
  * @whenNot A hierarchy trail, or a short list that fits on one page.
  * @useInstead Breadcrumb a hierarchy trail
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-194
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-194
  */
 import * as React from 'react';
 type PageToken = number | 'ellipsis';

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

@@ -2,7 +2,7 @@
  * Popover — floating surface anchored to a trigger (shadcn baseline, compound parts).
  * @category Overlays
  * @tier primitive
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=93-32
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=93-32
  * @doc-exempt: no Overlays doc page yet — add demo when the overlays page is created
  *
  * Radix Popover (@radix-ui/react-popover) themed with role tokens. Provides

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

@@ -6,7 +6,7 @@
  * @whenNot A wait of unknown length with no bar, or content that is still loading.
  * @useInstead Spinner a wait of unknown length
  * @useInstead Skeleton placeholder shapes for loading content
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-91
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-91
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -7,7 +7,7 @@
  * @useInstead Checkbox independent options that can be ticked together
  * @useInstead Select a long list that can collapse into a dropdown
  * @useInstead SegmentedControl a compact switch between two to five views or modes
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=36-17
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=36-17
  */
 import type { InputHTMLAttributes } from 'react';
 /** Radio — radio button with animated selection indicator. */

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

@@ -1,6 +1,7 @@
 /**
  * Reveal — reveal-on-scroll primitive via CSS scroll-driven animation.
  * @category Motion
+ * @usage Fade content in as it scrolls into view.
  * @tier primitive
  * @ai-intent Fades/slides/scales content in as it enters the viewport, driven
  * purely by scroll position (`animation-timeline: view()`) — no JS, no deps, no

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

@@ -13,7 +13,7 @@
  * @keyboard Enter Commits the highlighted option and returns focus to the trigger.
  * @keyboard Escape Closes the listbox and returns focus to the trigger.
  * @keyboard Tab Does not leave the open listbox.
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-49
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-49
  */
 /**
  * Select — dropdown selector built on Radix Select (ADR-001 Radix convention).

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

@@ -6,7 +6,7 @@
  * @whenNot A task with measurable progress, or a wait with no layout to reserve.
  * @useInstead Progress a task with measurable progress
  * @useInstead Spinner a short wait with no layout to reserve
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-95
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-95
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -5,7 +5,7 @@
  * @usage Pick a number within a known range by dragging, when the exact value matters less than the position.
  * @whenNot A precise number the person must type or read exactly.
  * @useInstead Input a precise typed value (type="number")
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=82-265
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=82-265
  */
 /** Slider — range slider with label and value display. */
 export interface SliderProps {

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

@@ -6,7 +6,7 @@
  * @whenNot A task with measurable progress, or a region whose layout is known.
  * @useInstead Progress a task with measurable progress
  * @useInstead Skeleton a region whose layout is known
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-106
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-106
  */
 import * as React from 'react';
 import { type VariantProps } from 'class-variance-authority';

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

@@ -2,7 +2,7 @@
  * Stack — one-dimensional layout primitive.
  * @category Layout
  * @tier primitive
- * @usage Space a row or column of content with token gaps and simple flex alignment.
+ * @usage Space items in a row or column with even gaps.
  * @whenNot Multi-column layout, or giving content a background or padding.
  * @useInstead Grid multi-column layout
  * @useInstead Surface content that needs a background or padding

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

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

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

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

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

@@ -1,7 +1,7 @@
 /**
  * @category Display
  * @tier pattern
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=88-292
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=88-292
  */
 import * as React from 'react';
 export type StatusTileTone = 'success' | 'warning' | 'danger' | 'info' | 'neutral';

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

@@ -6,7 +6,7 @@
  * @whenNot A single record, a short list of links, or content that reflows as cards.
  * @useInstead Field one record as label and value pairs
  * @useInstead Stack a short list of items
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=89-300
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=89-300
  */
 import { type ReactNode } from 'react';
 /** @public */

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

@@ -15,7 +15,9 @@
  * Overflow:
  *   TabsList is horizontally scrollable (`overflow-x-auto whitespace-nowrap`)
  *   for cases like /ops/atlas with 8 tabs at narrow viewports. Scrollbar
- *   chrome is hidden cross-browser (-webkit / firefox / IE).
+ *   chrome is hidden cross-browser (-webkit / firefox / IE). The trigger's
+ *   focus ring is `ring-inset` because `overflow-x-auto` clips anything drawn
+ *   outside the list box (an outer ring was cut on the first/last tab).
  *
  * @category Navigation
  * @tier primitive
@@ -29,7 +31,7 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
  * @whenNot A compact mode switch with no panels, or content that must all be visible.
  * @useInstead SegmentedControl a compact switch with no panels
  * @useInstead Disclosure optional content that expands in place
- * @figma https://www.figma.com/design/c8MaVgwxOlxm4wr8wnH0Z4/HDS-Tokens-Components?node-id=86-89
+ * @figma https://www.figma.com/design/2VgBbVpKiDnu0aftJEVyBQ/HDS-Tokens-Components?node-id=86-89
  */
 export declare const Tabs: import("react").ForwardRefExoticComponent<TabsPrimitive.TabsProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;