@hirobius/design-system 0.19.1 → 0.21.0

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.
@@ -51,11 +51,6 @@ type GapOption = 'tight' | 'normal' | 'inset' | 'spacious' | keyof typeof hds.sp
 export type CardVariant = 'default' | 'accent';
 /** @public */
 export type CardTone = 'neutral' | 'danger' | 'success' | 'warning' | 'info';
-declare const cardVariants: (props?: ({
-    variant?: "default" | "accent" | null | undefined;
-    tone?: "success" | "danger" | "warning" | "info" | "neutral" | null | undefined;
-    bordered?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 /** @public */
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Render-as element for the root wrapper. */
@@ -79,6 +74,12 @@ export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
      *  legibility. Default false — repeated cards in grids should stay
      *  borderless and rely on whitespace, rails, or section dividers. */
     bordered?: boolean;
+    /** Make the card one checkbox-like option (role="checkbox"): click or Space toggles it, Enter does not. A click on a control inside it is left to that control. */
+    selectable?: boolean;
+    /** Whether a selectable card is selected. Controlled: pair with onSelectedChange. */
+    selected?: boolean;
+    /** Called with the next selected state when a selectable card is toggled. */
+    onSelectedChange?: (selected: boolean) => void;
 }
 interface CardComponent extends React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>> {
     Header: typeof CardHeader;
@@ -129,21 +130,20 @@ 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
- * @usage Group related content on a raised surface with header, body, footer and metric slots.
+ * @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
  * @useInstead Card.Metric a single headline figure
  */
 export declare const Card: CardComponent;
 export { CardHeader, CardTitle, CardDescription, CardBody, CardFooter, CardProgress, CardMetric };
-/** @internal — CVA variant helper; compose via Card props instead. */
-export { cardVariants };

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

@@ -1,22 +1,23 @@
 /**
- * Combobox — searchable single-select (Popover + filtered listbox).
+ * Combobox — searchable single- or multi-select (Popover + filtered listbox).
  * @category Inputs
  * @tier pattern
- * @usage Pick one value from a long list of options, with a search field that filters as you type.
+ * @usage Pick one value, or several with `multiple`, from a long list of options, with a search field that filters as you type.
  * @whenNot A short list that needs no search, or an action list.
  * @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 Character Filters the options to those matching the typed text.
- * @keyboard Enter Commits the active option and closes the list.
+ * @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
  * @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
- * selection; opening reveals a search field that filters the option list.
+ * selection (with `multiple`, a count and a removable chip per value); opening
+ * reveals a search field that filters the option list.
  * Full keyboard support (↑/↓ to move, Enter to choose, Esc/outside-click to
  * close) and listbox/option ARIA. Controlled via `value` + `onChange`.
  *
@@ -34,14 +35,10 @@ export interface ComboboxOption {
     label: string;
     disabled?: boolean;
 }
-/** @public */
-export interface ComboboxProps {
+/** Props both arms share; consumers name an arm or `ComboboxAnyProps`. */
+interface ComboboxBaseProps {
     /** Selectable options. */
     options: ComboboxOption[];
-    /** Currently selected value, or null when nothing is chosen. */
-    value: string | null;
-    /** Fired with the chosen option's value. */
-    onChange: (value: string) => void;
     /** Trigger text when nothing is selected. */
     placeholder?: string;
     /** Placeholder for the search field. */
@@ -50,8 +47,47 @@ export interface ComboboxProps {
     emptyMessage?: string;
     /** Accessible label for the trigger (when not labelled by a <Field>). */
     'aria-label'?: string;
+    /**
+     * Id of the trigger, so a `<label for>` names it. `FormField` sets it, with
+     * `aria-describedby` and `aria-invalid`.
+     */
+    id?: string;
+    /** Ids of the elements that describe the trigger (helper text, error). */
+    'aria-describedby'?: string;
+    /** Marks the trigger invalid, for example while the field shows an error. */
+    'aria-invalid'?: boolean;
     className?: string;
     disabled?: boolean;
 }
+/**
+ * Single-select: one value, or none.
+ * @public
+ */
+export interface ComboboxProps extends ComboboxBaseProps {
+    /** Leave unset (or false) to pick one value. */
+    multiple?: false;
+    /** Currently selected value, or null when nothing is chosen. */
+    value: string | null;
+    /** Fired with the chosen option's value. */
+    onChange: (value: string) => void;
+}
+/**
+ * Multi-select (`multiple`): any number of values.
+ * @public
+ */
+export interface ComboboxMultipleProps extends ComboboxBaseProps {
+    /** Pick any number of values. */
+    multiple: true;
+    /** Currently selected values, in the order they were picked. */
+    value: readonly string[];
+    /** Fired with the next selected values whenever one is added or removed. */
+    onChange: (value: string[]) => void;
+}
+/**
+ * Either arm: single-select `ComboboxProps` or `ComboboxMultipleProps`.
+ * @public
+ */
+export type ComboboxAnyProps = ComboboxProps | ComboboxMultipleProps;
 /** @public */
-export declare const Combobox: React.ForwardRefExoticComponent<ComboboxProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Combobox: React.ForwardRefExoticComponent<ComboboxAnyProps & React.RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -15,8 +15,8 @@
  * NOT use the deprecated `padding` prop — it is a no-op; apply padding via
  * Surface or a Stack instead. Do NOT import Container directly inside a page
  * under src/app/pages — use Page, which wraps Container and owns vertical
- * rhythm. Use Center instead when you also need a horizontal gutter, which
- * Container does not support.
+ * rhythm. For a horizontal gutter, which Container does not support, put a
+ * Box with `style={{ paddingInline }}` inside it.
  *
  * Centers content horizontally and applies semantic max-width constraints.
  * - maxWidth options: 'content' (760px prose) | 'max' (1200px full layout)

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';
@@ -12,7 +13,7 @@ export interface DataTableSectionRow {
     /** One node per column, in column order. */
     cells: React.ReactNode[];
     /**
-     * Row actions (a `Button` group, a `Menu` trigger, `IconButton`s). Rendered in a
+     * Row actions (a `Button` group, a `Menu` trigger, icon-only `Button`s). Rendered in a
      * trailing column; the pattern bakes in no icon.
      */
     actions?: React.ReactNode;

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

@@ -81,11 +81,18 @@ interface DialogComponent extends React.FC<DialogProps> {
  * and a file-level @figma would hand all ten this one node.
  * @usage Interrupt the page with a modal that needs a decision or focused input before people continue.
  * @whenNot A preview on hover, a message that needs no reply, or content that can stay inline.
- * @useInstead HoverCard a preview on hover or focus
+ * @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).
+ * @slot header Groups the title and description (Dialog.Header).
+ * @slot title The heading that names the dialog (Dialog.Title).
+ * @slot description Supporting text announced with the title (Dialog.Description).
+ * @slot footer The row of actions (Dialog.Footer).
+ * @slot close The button that closes the dialog (Dialog.Close, or the X built into Dialog.Content).
  * @keyboard Enter/Space Opens the dialog from the trigger and moves focus inside it.
  * @keyboard Escape Closes the dialog and returns focus to the trigger.
  * @keyboard Tab Cycles focus inside the open dialog.

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

@@ -9,9 +9,6 @@
  */
 import React, { type CSSProperties, type ReactNode } from 'react';
 type DisclosureVariant = 'panel' | 'nav' | 'card';
-declare const disclosureTriggerVariants: (props?: ({
-    variant?: "nav" | "panel" | "card" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export type DisclosureProps = {
     /** Summary label rendered in the disclosure trigger. Accepts a string or ReactNode for icon+label combos. */
     label: ReactNode;
@@ -36,5 +33,4 @@ export type DisclosureProps = {
 };
 /** @public */
 export declare const Disclosure: React.ForwardRefExoticComponent<DisclosureProps & React.RefAttributes<HTMLDivElement>>;
-/** @internal — CVA variant helper; compose via Disclosure props instead. */
-export { disclosureTriggerVariants };
+export {};

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

@@ -24,5 +24,4 @@ export interface FieldProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
  * Caption label paired with a value — used in metadata grids and read-only forms.
  */
 export declare const Field: React.ForwardRefExoticComponent<FieldProps & React.RefAttributes<HTMLDivElement>>;
-/** @internal — CVA variant helper; compose via Field props instead. */
-export { fieldValueVariants };
+export {};

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

@@ -7,13 +7,14 @@
  * @useInstead Stack a single row or column
  * @useInstead Box one-off layout that no named primitive covers
  * @ai-intent Solves multi-column layout and repeatable alignment with token-governed gaps, responsive column collapse, and a first-class subgrid escape hatch for nested structure.
- * @ai-rules Use Grid for spatial layout, not for surface styling or content padding. Do NOT apply background, border, or internal padding directly to Grid to mimic a card. Do NOT use arbitrary CSS grid templates when fixed, auto-fit, or subgrid modes already express the layout. Do NOT use Grid for simple one-dimensional stacks where Stack is sufficient.
+ * @ai-rules Use Grid for spatial layout, not for surface styling or content padding. Do NOT apply background, border, or internal padding directly to Grid to mimic a card. Do NOT use arbitrary CSS grid templates when fixed, auto-fit, auto-fill, or subgrid modes already express the layout. Do NOT use Grid for simple one-dimensional stacks where Stack is sufficient.
  *
  * Enforces semantic gap and column values. No arbitrary CSS grid.
  * - layout='fixed':   responsive base (collapses via CSS at tablet/mobile).
  *                     `columns` sets desktop count (default 12). Tablet/mobile
  *                     clamp to min(8, cols) and min(4, cols) respectively.
  * - layout='auto-fit': responsive card wrapping via auto-fit.
+ * - layout='auto-fill': tile wrapping at `minItemWidth` (TileGrid's recipe; 0.20.0 removed TileGrid).
  * - subgrid=true:     sets gridTemplateColumns:'subgrid' for nested alignment.
  *
  * Usage (default responsive 12-col):
@@ -29,16 +30,19 @@
  *   </Grid>
  */
 import React, { type ReactNode, type CSSProperties } from 'react';
-type SemanticGap = 'tight' | 'normal' | 'inset' | 'spacious';
-type GridLayout = 'fixed' | 'auto-fit';
-export interface GridProps {
+type SemanticGap = 'medium' | 'tight' | 'normal' | 'inset' | 'spacious';
+type GridLayout = 'fixed' | 'auto-fit' | 'auto-fill';
+/** Grid's own props, plus any HTML attribute (role, aria-*, id) for its root element. */
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Grid content. */
     children: ReactNode;
-    /** Grid layout mode: 'fixed' (responsive) or 'auto-fit' (card wrapping). Defaults to 'fixed'. */
+    /** Grid layout mode: 'fixed' (responsive), 'auto-fit' (card wrapping) or 'auto-fill' (tile wrapping that keeps empty tracks). Defaults to 'fixed'. */
     layout?: GridLayout;
+    /** Minimum item width before 'auto-fit' or 'auto-fill' wraps, capped at the container width. Defaults to 280px. */
+    minItemWidth?: string;
     /** Desktop column count for layout='fixed'. Tablet clamps to min(8,n), mobile to min(4,n). Defaults to 12. */
     columns?: number;
-    /** Gap between grid items: semantic only. Defaults to 'inset' (32px). */
+    /** Gap between grid items: semantic only. 'medium' is a fixed 12px. Defaults to 'inset' (32px). */
     gap?: SemanticGap;
     /** If true, sets gridTemplateColumns:'subgrid' for nested grid alignment. */
     subgrid?: boolean;
@@ -46,6 +50,11 @@ export interface GridProps {
     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,6 +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
  * @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
@@ -12,7 +13,7 @@
  *
  *   <Tooltip>
  *     <Tooltip.Trigger asChild>
- *       <IconButton icon={Link} aria-label="Copy link" />
+ *       <Button iconOnly label="Copy link" iconLeft={<Icon icon={Link} />} />
  *     </Tooltip.Trigger>
  *     <Tooltip.Content>Copy link</Tooltip.Content>
  *   </Tooltip>
@@ -21,7 +22,9 @@
  * content text (semantic.color.content.inverse) — these are a designed pair, so
  * the bubble reads correctly in BOTH themes (dark bubble/light text in light
  * mode, light bubble/dark text in dark mode). Radius 4 (primitive.radius.4),
- * shadow-overlay, and a matching arrow. Text reuses the caption type composite.
+ * shadow-floating (semantic.elevation.floating, the popover and dropdown
+ * shadow; shadow-overlay is for dialogs), and a matching arrow. Text reuses the
+ * caption type composite.
  */
 import * as React from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -51,6 +54,13 @@ interface HdsTooltipComponent extends React.FC<React.ComponentProps<typeof Toolt
  * Tooltip root. Bakes in the Radix Provider so a single `<Tooltip>` is
  * self-contained — no app-level provider required. Controlled via
  * `open`/`onOpenChange`, or uncontrolled with `defaultOpen`.
+ * @usage Name an icon-only control, or add a short hint that appears on hover and keyboard focus.
+ * @whenNot Anything interactive, text people need to finish a task, or a hint touch users must see (touch has no hover).
+ * @useInstead Popover interactive or longer content that opens on click
+ * @useInstead Text a hint that must stay visible
+ * @keyboard Focus Opens the tooltip when the trigger receives keyboard focus.
+ * @keyboard Escape Closes the tooltip and keeps focus on the trigger.
+ * @keyboard Tab Moves on to the next control and closes the tooltip.
  * @public
  */
 declare const Tooltip: HdsTooltipComponent;

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/inline-code.d.ts

@@ -22,5 +22,4 @@ export type InlineCodeProps = {
 };
 /** @public */
 export declare function InlineCode({ children, style, density, compact, copyable, }: InlineCodeProps): import("react/jsx-runtime").JSX.Element;
-/** @internal — CVA variant helper; compose via InlineCode props instead. */
-export { inlineCodeVariants };
+export {};

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

@@ -2,7 +2,7 @@
  * Input — text field primitive with label, helper, and error slots.
  * @category Inputs
  * @tier primitive
- * @usage Collect a single line of text, a number, an email or a password, with label, helper and error slots.
+ * @usage Collect a single line of text, a number, an email, a password, a date or a time, with label, helper and error slots.
  * @whenNot Multi-line text, or choosing from a fixed list of options.
  * @useInstead Textarea multi-line text
  * @useInstead Select a short fixed list
@@ -16,10 +16,10 @@ declare const inputVariants: (props?: ({
     textStyle?: "body" | "mono" | null | undefined;
     invalid?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-type InputFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+type InputFieldType = 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' | 'date' | 'time' | 'datetime-local';
 /** @public */
 export type InputSize = NonNullable<VariantProps<typeof inputVariants>['size']>;
-export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'disabled' | 'size'> {
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'disabled' | 'size' | 'prefix'> {
     /** Native input type. */
     type?: InputFieldType;
     /** Field height tier. */
@@ -34,6 +34,10 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     leadingVisual?: React.ReactNode;
     /** Optional trailing visual rendered inside the input shell. */
     trailingVisual?: React.ReactNode;
+    /** In-flow content before the value, e.g. `https://` or `$`. Not part of the accessible name. */
+    prefix?: React.ReactNode;
+    /** In-flow content after the value, e.g. a unit such as `kg`. Not part of the accessible name. */
+    suffix?: React.ReactNode;
     /** Disable interaction. */
     disabled?: boolean;
     /** Mark the field as invalid (sets aria-invalid + destructive border). */
@@ -48,5 +52,4 @@ export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElem
     inputClassName?: string;
 }
 export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
-/** @internal — CVA variant helper; compose via Input props instead. */
-export { inputVariants };
+export {};

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
@@ -17,5 +18,4 @@ export interface KbdProps extends React.HTMLAttributes<HTMLElement>, KbdVariantP
 }
 /** Renders a keyboard key or shortcut token, e.g. `<Kbd>⌘K</Kbd>`. */
 export declare const Kbd: React.ForwardRefExoticComponent<KbdProps & React.RefAttributes<HTMLElement>>;
-/** @internal — CVA variant helper; compose via Kbd props instead. */
-export { kbdVariants };
+export {};

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';
@@ -39,5 +40,4 @@ export interface MetadataListProps extends Omit<React.HTMLAttributes<HTMLDListEl
 }
 /** Renders object metadata as a semantic `<dl>` of term/description pairs. */
 export declare const MetadataList: React.ForwardRefExoticComponent<MetadataListProps & React.RefAttributes<HTMLDListElement>>;
-/** @internal — CVA variant helper; compose via MetadataList props instead. */
-export { metadataListVariants };
+export {};

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/page-header.d.ts

@@ -27,8 +27,6 @@ export interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>,
  * Screen header: breadcrumb slot, the title at the one canonical page-title size
  * (`heading2`), a status slot and an actions slot. Every screen has exactly one.
  * `display` and `h1` type are reserved for marketing and landing surfaces.
- *
- * Distinct from the docs-only page header in `src/docs-tooling`.
  * @screenPattern
  */
 export declare const PageHeader: React.ForwardRefExoticComponent<PageHeaderProps & React.RefAttributes<HTMLElement>>;

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

@@ -51,6 +51,14 @@ interface PopoverComponent extends React.FC<React.ComponentProps<typeof PopoverP
 /**
  * Popover root + parts. Controlled via `open`/`onOpenChange`, or uncontrolled
  * with `defaultOpen`.
+ * @usage Anchor interactive content, such as a short form, a filter set or a picker, to a trigger people click to open.
+ * @whenNot A short label on hover or focus, a list of actions, or a decision that must block the page.
+ * @useInstead Tooltip a short label shown on hover or focus
+ * @useInstead Menu a list of actions
+ * @useInstead Dialog a decision that blocks the page
+ * @keyboard Enter/Space Opens the popover from the trigger and moves focus inside it.
+ * @keyboard Escape Closes the popover and returns focus to the trigger.
+ * @keyboard Tab Cycles focus inside the open popover; the page behind stays reachable.
  * @public
  */
 declare const Popover: PopoverComponent;

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

@@ -1,8 +1,8 @@
 /**
- * Progress - linear progress bar (determinate or indeterminate).
+ * Progress - linear bar or circular ring (determinate or indeterminate).
  * @category Feedback
  * @tier primitive
- * @usage Show how far a task has got, as a bar that is determinate or indeterminate.
+ * @usage Show how far a task has got, as a bar or ring that is determinate or indeterminate.
  * @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
@@ -13,18 +13,45 @@ import { type VariantProps } from 'class-variance-authority';
 declare const progressTrackVariants: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+declare const PROGRESS_TONES: {
+    readonly neutral: {
+        readonly bar: "bg-primary";
+        readonly ring: "text-primary";
+    };
+    readonly danger: {
+        readonly bar: "bg-feedback-danger";
+        readonly ring: "text-feedback-danger";
+    };
+    readonly success: {
+        readonly bar: "bg-feedback-success";
+        readonly ring: "text-feedback-success";
+    };
+    readonly warning: {
+        readonly bar: "bg-feedback-warning";
+        readonly ring: "text-feedback-warning";
+    };
+    readonly info: {
+        readonly bar: "bg-feedback-info";
+        readonly ring: "text-feedback-info";
+    };
+};
 type ProgressVariantProps = VariantProps<typeof progressTrackVariants>;
 /** @public */
 export interface ProgressProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'role'>, ProgressVariantProps {
     /**
-     * Completion 0–100. Omit (or pass null) for an indeterminate bar that
+     * Completion 0–max. Omit (or pass null) for an indeterminate bar that
      * animates until the work completes.
      */
     value?: number | null;
+    /** Upper bound for `value`. Defaults to 100. */
+    max?: number;
+    /** Shape: `linear` bar (default) or `circular` ring. */
+    variant?: 'linear' | 'circular';
+    /** Fill color: `neutral` (default) or a feedback tone. */
+    tone?: keyof typeof PROGRESS_TONES;
     /** Accessible label for the progress bar. */
     label?: string;
 }
-/** Linear progress. Determinate when `value` is a number, else indeterminate. */
+/** Linear bar or circular ring. Determinate when `value` is a number, else indeterminate. */
 export declare const Progress: React.ForwardRefExoticComponent<ProgressProps & React.RefAttributes<HTMLDivElement>>;
-/** @internal — CVA variant helper; compose via Progress props instead. */
-export { progressTrackVariants };
+export {};

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

@@ -1,35 +1,12 @@
 import { type VariantProps } from 'class-variance-authority';
-declare const segmentedControlWrapperVariants: (props?: ({
-    fullWidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const segmentedControlRailVariants: (props?: ({
-    variant?: "primary" | "secondary" | null | undefined;
-    fullWidth?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 declare const segmentedControlItemVariants: (props?: ({
     size?: "sm" | "md" | null | undefined;
     fullWidth?: boolean | null | undefined;
     variant?: "primary" | "secondary" | null | undefined;
     active?: boolean | null | undefined;
-    interaction?: "rest" | "hover" | "pressed" | null | undefined;
+    interaction?: "hover" | "pressed" | "rest" | null | undefined;
     disabled?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const segmentedControlIndicatorVariants: (props?: ({
-    variant?: "primary" | "secondary" | null | undefined;
-    active?: boolean | null | undefined;
-    interaction?: "rest" | "hover" | "pressed" | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const segmentedControlDescriptionVariants: (props?: ({
-    variant?: "primary" | "secondary" | null | undefined;
-    active?: boolean | null | undefined;
-    interaction?: "rest" | "hover" | "pressed" | null | undefined;
-    disabled?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const segmentedControlFocusRingVariants: (props?: ({
-    variant?: "primary" | "secondary" | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
-declare const segmentedControlLabelVariants: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
 type SegmentedItemVariantProps = VariantProps<typeof segmentedControlItemVariants>;
 interface HdsSegmentedOption {
     /** Value submitted when this option is selected. */
@@ -63,5 +40,4 @@ export interface SegmentedControlProps {
 }
 /** @public */
 export declare const SegmentedControl: import("react").ForwardRefExoticComponent<SegmentedControlProps & import("react").RefAttributes<HTMLDivElement>>;
-/** @internal — CVA variant helpers; compose via SegmentedControl props instead. */
-export { segmentedControlWrapperVariants, segmentedControlRailVariants, segmentedControlItemVariants, segmentedControlIndicatorVariants, segmentedControlDescriptionVariants, segmentedControlFocusRingVariants, segmentedControlLabelVariants, };
+export {};

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

@@ -23,7 +23,7 @@
  * tabs.tsx / command-palette.tsx; `ref` targets the trigger button.
  */
 export interface SelectProps {
-    /** Select label rendered above the control. */
+    /** Select label rendered above the control. It names the trigger, also when hidden. */
     label: string;
     /** Controls whether the label is rendered. */
     showLabel?: boolean;
@@ -41,5 +41,14 @@ export interface SelectProps {
      * overlay inherits its theme; pass `null` to use `document.body`.
      */
     container?: HTMLElement | null;
+    /**
+     * Id of the trigger, so a `<label for>` names it. `FormField` sets it, with
+     * `aria-describedby` and `aria-invalid`.
+     */
+    id?: string;
+    /** Ids of the elements that describe the trigger (helper text, error). */
+    'aria-describedby'?: string;
+    /** Marks the trigger invalid, for example while the field shows an error. */
+    'aria-invalid'?: boolean;
 }
 export declare const Select: import("react").ForwardRefExoticComponent<SelectProps & import("react").RefAttributes<HTMLButtonElement>>;