@platned/ui 0.3.0 → 0.5.1

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, TextareaHTMLAttributes, SelectHTMLAttributes, HTMLAttributes, RefObject, Key } from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, HTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, ReactElement, RefObject, AnchorHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes, Key } from 'react';
 import { ClassValue } from 'clsx';
 
 type ButtonVariant = 'primary' | 'neutral' | 'subtle' | 'danger' | 'danger-subtle';
@@ -9,8 +9,20 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: ButtonSize;
     leadingIcon?: ReactNode;
     trailingIcon?: ReactNode;
+    /**
+     * Render the single child element instead of a `<button>` — e.g. a router `Link`, so a
+     * navigation action can look like a button without nesting an anchor inside one.
+     */
+    asChild?: boolean;
+    /**
+     * Swaps the leading icon for a spinner and disables the button. `aria-busy` is set so
+     * assistive tech reports the pending state rather than only the disabled one.
+     */
+    loading?: boolean;
+    /** Announced while `loading`. Defaults to the button's own content. */
+    loadingLabel?: string;
 }
-declare function Button({ variant, size, leadingIcon, trailingIcon, children, className, ...props }: ButtonProps): react.JSX.Element;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type IconButtonVariant = 'primary' | 'neutral' | 'subtle';
 interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -18,8 +30,11 @@ interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
     size?: ButtonSize;
     /** Required for accessibility — no visible text label */
     'aria-label': string;
+    /** Render the single child element instead of a `<button>` — e.g. a router `Link`. */
+    asChild?: boolean;
+    children?: ReactNode;
 }
-declare function IconButton({ variant, size, children, className, ...props }: IconButtonProps): react.JSX.Element;
+declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
 
 type ButtonGroupVariant = 'primary' | 'neutral' | 'filter';
 type ButtonGroupAlign = 'justify' | 'start' | 'end' | 'center' | 'stack';
@@ -86,7 +101,7 @@ type InputSize = 'lg' | 'md' | 'sm';
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
     label?: string;
     description?: string;
-    /** Red border + message shown below the input */
+    /** Red border + message shown below the input. Also sets `aria-invalid`. */
     error?: string;
     /** Neutral helper text shown below the input (hidden when error is set) */
     hint?: string;
@@ -98,38 +113,238 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>
     trailingAction?: ReactNode;
 }
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+/**
+ * The bare `<input>` with the field wiring applied and no label/message chrome — for
+ * `InputGroup` and any composition that supplies its own `Field`.
+ */
+interface InputControlProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    size?: InputSize;
+    invalid?: boolean;
+}
+declare const InputControl: react.ForwardRefExoticComponent<InputControlProps & react.RefAttributes<HTMLInputElement>>;
+
+/**
+ * The label / description / error / control wiring, in one place.
+ *
+ * This exists because of the single largest defect the 0.3.0 audit found. `Input`,
+ * `Textarea`, `Select` and `DatePicker` all accepted `label`, `description`, `error` and
+ * `hint`, rendered them, and then connected **none** of them:
+ *
+ * - `<label htmlFor={id}>` used the caller's `id` with no fallback. Omit `id` — the
+ *   common case — and `htmlFor` was `undefined`, so the label pointed at nothing.
+ *   Clicking it did nothing and assistive tech announced an unlabelled field.
+ * - `description`, `error` and `hint` were bare `<p>` elements with no `id`, and no
+ *   control ever referenced them. A consumer could not fix this from outside either:
+ *   passing `aria-describedby` had nothing to point at.
+ * - `error` drove the border colour and nothing else. No `aria-invalid`, no `role`, no
+ *   live region — so an async validation failure was completely silent.
+ *
+ * For scale: `aria-describedby`, `aria-invalid` and `aria-required` appeared nowhere in
+ * `src/`, and `useId` was used exactly once in the whole library — in `Sparkline`, for an
+ * SVG gradient.
+ *
+ * `Field` generates the ids and hands them down through context, so a control only has to
+ * spread `useFieldControl()` onto its input element. It is also usable directly for
+ * controls the library does not wrap, which is why the parts are exported.
+ */
+interface FieldContextValue {
+    controlId: string;
+    /**
+     * Id of the `FieldLabel`, for controls whose accessible name cannot come from a
+     * `<label for>` association. A `<button>` is named by its own contents, so the Select
+     * trigger has to point `aria-labelledby` at the label explicitly or it announces only
+     * the chosen value.
+     */
+    labelId: string;
+    descriptionId: string;
+    errorId: string;
+    hintId: string;
+    hasDescription: boolean;
+    hasError: boolean;
+    hasHint: boolean;
+    invalid: boolean;
+    required: boolean;
+    disabled: boolean;
+    size: InputSize;
+}
+declare function useFieldContext(): FieldContextValue | null;
+/**
+ * Props for the control itself. Spread onto the `<input>`/`<select>`/`<textarea>`.
+ *
+ * `aria-describedby` deliberately lists description *and* message: a field can carry
+ * both persistent guidance and a transient error, and a screen reader should read both
+ * rather than have the error replace the instruction that explains the format.
+ */
+declare function useFieldControl(): {
+    id: string | undefined;
+    'aria-describedby': string | undefined;
+    'aria-invalid': true | undefined;
+    'aria-required': true | undefined;
+    disabled: boolean | undefined;
+};
+type FieldOrientation = 'vertical' | 'horizontal';
+interface FieldProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Supply to control the id yourself; otherwise one is generated. */
+    id?: string;
+    size?: InputSize;
+    invalid?: boolean;
+    required?: boolean;
+    disabled?: boolean;
+    /** `horizontal` puts the label beside the control — for switches and checkboxes. */
+    orientation?: FieldOrientation;
+    /** Set when a `FieldDescription` is rendered. Inferred by the wrapped controls. */
+    hasDescription?: boolean;
+    hasError?: boolean;
+    hasHint?: boolean;
+}
+declare function Field({ children, id, size, invalid, required, disabled, orientation, hasDescription, hasError, hasHint, className, ...rest }: FieldProps): react.JSX.Element;
+interface FieldLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    children: ReactNode;
+}
+declare function FieldLabel({ children, className, htmlFor, ...rest }: FieldLabelProps): react.JSX.Element;
+interface FieldTextProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+}
+/** Persistent guidance, shown above the control and announced with it. */
+declare function FieldDescription({ children, className, ...rest }: FieldTextProps): react.JSX.Element;
+/**
+ * Validation message. `role="alert"` because an error that appears after submit —
+ * asynchronously, without focus moving — is otherwise never announced at all.
+ */
+declare function FieldError({ children, className, ...rest }: FieldTextProps): react.JSX.Element;
+/** Neutral helper text. Suppressed while an error is showing, so the two never stack. */
+declare function FieldHint({ children, className, ...rest }: FieldTextProps): react.JSX.Element;
+interface FieldGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Stacks several `Field`s with consistent rhythm. */
+declare function FieldGroup({ children, className, ...rest }: FieldGroupProps): react.JSX.Element;
+interface FieldSetProps extends HTMLAttributes<HTMLFieldSetElement> {
+    children: ReactNode;
+}
+/**
+ * A real `<fieldset>`. Required for radio groups and checkbox groups: the group needs a
+ * name of its own, and only `<legend>` gives it one that is announced before each option.
+ */
+declare function FieldSet({ children, className, ...rest }: FieldSetProps): react.JSX.Element;
+interface FieldLegendProps extends HTMLAttributes<HTMLLegendElement> {
+    children: ReactNode;
+    /** `label` matches a field label's weight; `legend` is the larger section heading. */
+    variant?: 'legend' | 'label';
+}
+declare function FieldLegend({ children, variant, className, ...rest }: FieldLegendProps): react.JSX.Element;
+interface FieldSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+declare function FieldSeparator({ className, ...rest }: FieldSeparatorProps): react.JSX.Element;
+
+interface ControlSizeProviderProps {
+    size: InputSize;
+    children: ReactNode;
+}
+declare function ControlSizeProvider({ size, children }: ControlSizeProviderProps): react.JSX.Element;
+/**
+ * Resolve a control's size: an explicit prop, else the enclosing container's default,
+ * else `md`.
+ *
+ * Call it unconditionally at the top of the component — it is a hook.
+ */
+declare function useControlSize(explicit?: InputSize): InputSize;
 
 interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
     label?: string;
     description?: string;
+    /** Red border + message shown below the control. Also sets `aria-invalid`. */
     error?: string;
     hint?: string;
     size?: InputSize;
 }
 declare const Textarea: react.ForwardRefExoticComponent<TextareaProps & react.RefAttributes<HTMLTextAreaElement>>;
+interface TextareaControlProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    size?: InputSize;
+    invalid?: boolean;
+}
+/** The bare `<textarea>` with field wiring, for compositions that supply their own `Field`. */
+declare const TextareaControl: react.ForwardRefExoticComponent<TextareaControlProps & react.RefAttributes<HTMLTextAreaElement>>;
 
 interface SelectOption {
     value: string;
     label: string;
+    disabled?: boolean;
+}
+interface SelectOptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+interface SelectControlProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'defaultValue' | 'onChange' | 'children' | 'type'> {
+    /** Flat options, or groups which render as a labelled `role="group"`. */
+    options: (SelectOption | SelectOptionGroup)[];
+    value?: string | null;
+    defaultValue?: string | null;
+    onValueChange?: (value: string) => void;
+    /**
+     * Submits with a surrounding form, through a hidden input. Note that hidden inputs are
+     * exempt from constraint validation, so `required` no longer blocks submit — see the
+     * note on `Select`.
+     */
+    name?: string;
+    size?: InputSize;
+    invalid?: boolean;
+    placeholder?: string;
 }
-interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+/**
+ * The bare trigger and its listbox, with field wiring and no label/message chrome — for
+ * `Select` and any composition that supplies its own `Field`.
+ */
+declare const SelectControl: react.ForwardRefExoticComponent<SelectControlProps & react.RefAttributes<HTMLButtonElement>>;
+interface SelectProps extends SelectControlProps {
     label?: string;
     description?: string;
+    /** Red border + message shown below the control. Also sets `aria-invalid`. */
     error?: string;
     hint?: string;
-    size?: InputSize;
-    options: SelectOption[];
-    placeholder?: string;
+    required?: boolean;
 }
-declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLSelectElement>>;
+/**
+ * Single-select dropdown: a trigger and a portalled listbox.
+ *
+ * Through 0.4.0 this wrapped a native `<select>`, which was the right call for its keyboard
+ * contract and the wrong one for everything visual: the option popup is drawn by the OS and
+ * cannot be styled at all, so a Select never matched the `DropdownMenu` and `Combobox`
+ * panels sitting beside it on the same filter row. It is now the same panel as those, and
+ * the keyboard contract it used to inherit is implemented rather than borrowed — arrows,
+ * Home/End, typeahead, Escape, and Tab that leaves without committing.
+ *
+ * Two consequences of dropping the native element, neither papered over:
+ *
+ *  - **No OS picker on mobile.** The wheel/sheet a native select opens is gone.
+ *  - **`required` no longer blocks submit.** The value posts through a hidden input, and
+ *    hidden inputs are exempt from constraint validation. `required` remains semantic and
+ *    visual — `aria-required` on the control and the `*` on its label — which is already
+ *    true of `Combobox`, `RadioGroup` and `MultiSelectCard`. In react-hook-form, register
+ *    it with `Controller` rather than `register`.
+ *
+ * For a list long enough to need filtering, use `Combobox`.
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement>>;
 
 interface DatePickerProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     label?: string;
     description?: string;
+    /** Red border + message shown below the control. Also sets `aria-invalid`. */
     error?: string;
     hint?: string;
     size?: InputSize;
 }
+/**
+ * A native `<input type="date">`.
+ *
+ * The `::-webkit-calendar-picker-indicator` styling below is Chromium-only — on Firefox
+ * and Safari the native affordance differs, so the drawn `LuCalendar` sits alongside
+ * whatever the platform renders rather than replacing it. That is a known limitation of
+ * this component, not a bug to paper over: for a real month grid, range selection, locale
+ * control or min/max navigation, use `Calendar` and `DateField` instead.
+ */
 declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLInputElement>>;
 
 type StepStatus = 'complete' | 'active' | 'upcoming';
@@ -137,39 +352,162 @@ interface StepItem {
     label: string;
     status: StepStatus;
 }
+type StepperSize = 'sm' | 'md';
 interface StepperProps {
     steps: StepItem[];
+    /** Matches Figma's `Size` axis on the `Stepper` component set. */
+    size?: StepperSize;
+    /** Names the list. Defaults to `Progress`. Override for a non-English UI. */
+    label?: string;
     className?: string;
 }
-declare function Stepper({ steps, className }: StepperProps): react.JSX.Element;
+declare function Stepper({ steps, size, label, className }: StepperProps): react.JSX.Element;
 
+/** Matches Figma's `Size` axis on `Multiselect Card` (`Default | Small`). */
+type MultiSelectCardSize = 'default' | 'sm';
 interface MultiSelectCardProps {
     icon: ReactNode;
     title: string;
     description?: string;
     selected: boolean;
     onToggle: () => void;
+    /**
+     * Figma has had this axis since 0.2.0; the 0.3.0 CHANGELOG recorded it as "left alone
+     * pending a design decision". `Default` and `Small` differ only in padding, icon box and
+     * type step, so there was nothing to decide.
+     */
+    size?: MultiSelectCardSize;
+    disabled?: boolean;
     className?: string;
 }
-declare function MultiSelectCard({ icon, title, description, selected, onToggle, className, }: MultiSelectCardProps): react.JSX.Element;
+declare function MultiSelectCard({ icon, title, description, selected, onToggle, size, disabled, className, }: MultiSelectCardProps): react.JSX.Element;
 
-type ToggleSize = 'sm' | 'md';
-interface ToggleProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+type SwitchSize = 'sm' | 'md';
+interface SwitchProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'value' | 'type'> {
+    /** Controlled. Omit and pass `defaultChecked` for uncontrolled. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
     /** Visible text beside the switch. Doubles as the accessible name. */
-    label?: string;
+    label?: ReactNode;
+    /** Second line under the label. Matches Figma's `Supporting text` axis. */
+    description?: ReactNode;
     /** Track size. `sm` is 36×20, `md` is 44×24. */
+    size?: SwitchSize;
+}
+/**
+ * An on/off switch — a setting that takes effect immediately, with no save step.
+ *
+ * **Renamed from `Toggle` in 0.4.0.** It was always a switch: `role="switch"`,
+ * `aria-checked`, and the track/knob geometry taken from Figma. The name was blocking,
+ * because "Toggle" means something else in shadcn/ui and in most design systems — a
+ * pressed-state *button*, like a bold button in a text toolbar. That component now exists
+ * here under the name everyone expects, and the two are not interchangeable:
+ *
+ * - `Switch` — `role="switch"`, "on"/"off", applies immediately. A setting.
+ * - `Toggle` — `aria-pressed`, "pressed"/"not pressed". A button whose effect persists.
+ *
+ * Figma calls its set `Toggle` with a `Pressed` axis, but its geometry and `_Toggle base`
+ * match this component exactly, so Figma's `Toggle` **is** this switch. Figma has no
+ * pressed-button equivalent yet; that is a gap on the design side, recorded in the
+ * CHANGELOG rather than papered over here.
+ */
+declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLButtonElement>>;
+
+type ToggleSize = 'sm' | 'md' | 'lg';
+type ToggleVariant = 'ghost' | 'outline';
+interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange' | 'type'> {
+    /** Controlled pressed state. Omit and pass `defaultPressed` for uncontrolled. */
+    pressed?: boolean;
+    defaultPressed?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
     size?: ToggleSize;
+    variant?: ToggleVariant;
+    children?: ReactNode;
+}
+/**
+ * A button with a sticky pressed state — bold in a text toolbar, a map layer on/off, a
+ * filter that stays applied.
+ *
+ * **New in 0.4.0, and not what `Toggle` used to be.** Through 0.3.0 this name belonged to
+ * the on/off switch, which is now `Switch`. The two look similar and mean different things:
+ *
+ * - `Toggle` — `aria-pressed`. A *button*. "Bold is pressed."
+ * - `Switch` — `role="switch"` + `aria-checked`. A *setting*. "Notifications are on."
+ *
+ * `aria-pressed` rather than `aria-checked` is the whole distinction as far as assistive
+ * tech is concerned, and it is why this is not just `Switch` with different styling.
+ *
+ * An icon-only toggle needs `aria-label`, exactly as `IconButton` does — there is no visible
+ * text to name it.
+ */
+declare const Toggle: react.ForwardRefExoticComponent<ToggleProps & react.RefAttributes<HTMLButtonElement>>;
+type ToggleGroupType = 'single' | 'multiple';
+interface ToggleGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    /** `single` behaves like a radio group; `multiple` like a set of checkboxes. */
+    type?: ToggleGroupType;
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    /** Names the group. Required by the APG for a toolbar-style group. */
+    label: string;
     disabled?: boolean;
-    id?: string;
-    /** Accessible name when there is no visible `label`. */
-    'aria-label'?: string;
-    /** Points at the id of an existing visible label elsewhere on the page. */
-    'aria-labelledby'?: string;
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * A set of related toggles sharing one selection.
+ *
+ * `role="group"` with `aria-pressed` on each child, and a roving tabindex so the set is one
+ * tab stop with arrow keys inside — the same contract `SegmentedControl` was missing before
+ * 0.4.0.
+ *
+ * How this differs from the neighbours, since three components in this library now look
+ * similar: `SegmentedControl` is a `radiogroup` for choosing *one* of a small set of views,
+ * and always has exactly one selection. `ToggleGroup type="multiple"` allows none or many.
+ * `ToggleGroup type="single"` allows none or one — the deselectable case a radio group
+ * cannot express.
+ */
+declare function ToggleGroup({ children, type, value: valueProp, defaultValue, onValueChange, label, disabled, orientation, className, ...rest }: ToggleGroupProps): react.JSX.Element;
+interface ToggleGroupItemProps extends Omit<ToggleProps, 'pressed' | 'defaultPressed'> {
+    value: string;
+}
+/** A `Toggle` wired to its `ToggleGroup`, with the roving tabindex applied. */
+declare const ToggleGroupItem: react.ForwardRefExoticComponent<ToggleGroupItemProps & react.RefAttributes<HTMLButtonElement>>;
+
+type InputOTPMode = 'numeric' | 'alphanumeric';
+interface InputOTPProps {
+    /** Number of characters. Default `6`. */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Fired once the last slot is filled. */
+    onComplete?: (value: string) => void;
+    mode?: InputOTPMode;
+    /** Draws a gap after this many slots — `3` for a `123 456` code. */
+    groupAfter?: number;
+    /** Accessible name. Default `Verification code`. */
+    label?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    autoFocus?: boolean;
     className?: string;
 }
-declare function Toggle({ checked, onChange, label, size, disabled, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, className, }: ToggleProps): react.JSX.Element;
+/**
+ * A one-time-code field — the boxed digits from a 2FA or email-verification flow.
+ *
+ * **One real input, N drawn boxes.** The obvious implementation is N separate `<input>`s,
+ * and it is the wrong one: it makes the code N tab stops, breaks paste (the browser puts all
+ * six characters in the first box), fights password managers and SMS autofill, and announces
+ * "edit text, blank" six times. Instead there is a single input holding the whole value —
+ * with `autocomplete="one-time-code"`, so iOS and Android offer the code from the incoming
+ * message — rendered transparently over the boxes, which are decorative.
+ *
+ * That means paste, autofill, undo, selection and screen readers all get the real value, and
+ * the caret position simply drives which box is highlighted.
+ */
+declare const InputOTP: react.ForwardRefExoticComponent<InputOTPProps & react.RefAttributes<HTMLInputElement>>;
 
 interface FileDropZoneProps {
     className?: string;
@@ -216,18 +554,28 @@ interface BadgeProps {
 }
 declare function Badge({ label, color, size, variant, indicator, onClose, className, }: BadgeProps): react.JSX.Element;
 
+/**
+ * The nine-hue categorical palette from `badge.css`, which is what roles want: a role is a
+ * *category*, not a severity, so it must not borrow the semantic tones — a `danger`-coloured
+ * role badge would imply the role itself is a problem.
+ */
+type RoleBadgeTone = 'slate' | 'blue' | 'green' | 'yellow' | 'red' | 'pink' | 'teal' | 'lime' | 'gray';
 interface RoleBadgeProps {
     role: string;
     size?: 'sm' | 'md';
     /**
-     * Explicit role colour as a solid 6-digit hex (e.g. `#0c2d58`). When set it drives
-     * the badge — text uses the hex and the background a light tint of it. Prefer this
-     * over relying on the built-in name map, which only covers a fixed set of English
-     * role names. Falls back to the name map, then grey.
+     * Override the name-map lookup. Use this for roles the map does not know, in preference to
+     * `color` — it stays on the token layer and re-themes with the rest of the badge palette.
+     */
+    tone?: RoleBadgeTone;
+    /**
+     * @deprecated Bypasses the design tokens — pass `tone` instead. Raw 6-digit hex; text uses
+     * the hex and the background a 12% tint of it. Kept for role colours that genuinely come
+     * from API data rather than from the design system.
      */
     color?: string | null;
 }
-declare function RoleBadge({ role, size, color }: RoleBadgeProps): react.JSX.Element;
+declare function RoleBadge({ role, size, tone, color }: RoleBadgeProps): react.JSX.Element;
 
 interface RoleOption {
     role: string;
@@ -238,8 +586,130 @@ interface RoleComboBoxProps {
     value: string;
     onChange: (role: string) => void;
     options?: RoleOption[];
+    /** Accessible name. Defaults to `Role`. */
+    label?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Role picker.
+ *
+ * Rebuilt in 0.4.0 as a thin wrapper over `Combobox`, which is all it should ever have been.
+ * The version it replaces was the least correct component in the library and is worth
+ * recording, because every one of these was a category of bug rather than a detail:
+ *
+ * - `role="combobox"` sat on a `<div>` while the real `<input>` had no role and none of the
+ *   state attributes. Under ARIA 1.2 the role belongs on the input.
+ * - The `role="listbox"` had no `id`, so `aria-controls` could not point at it, and there
+ *   was no `aria-activedescendant` at all.
+ * - No arrow keys, no Home/End, no wrap. The **selected** option had no `tabIndex`, so it
+ *   was mouse-only, while every *other* option was individually tabbable.
+ * - Escape worked on the trigger but not on the search input or the options, and closing
+ *   never returned focus to the trigger.
+ * - The tick was a literal `✓` text node, announced as "check mark" mid-option.
+ * - It bypassed the token system entirely — `border-blue-500`, `bg-white`, `bg-blue-50`,
+ *   `text-blue-600`, `text-sm` — and built its className with a template literal. Both are
+ *   explicitly against the rules in CLAUDE.md, and the raw colours meant it would not theme.
+ *
+ * It stays a preset rather than becoming `Combobox` usage at every call site only because it
+ * renders a `RoleBadge` per option, which `renderOption` exists for.
+ */
+declare function RoleComboBox({ value, onChange, options, label, size, disabled, className, }: RoleComboBoxProps): react.JSX.Element;
+
+interface ComboboxOption<T = string> {
+    value: T;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    /** Optional group heading. Options sharing a group are rendered together. */
+    group?: string;
+}
+interface ComboboxProps<T extends string = string> {
+    options: ComboboxOption<T>[];
+    value?: T | null;
+    defaultValue?: T | null;
+    onValueChange?: (value: T | null) => void;
+    /** Accessible name. Required unless the combobox is inside a `Field` with a label. */
+    label?: string;
+    placeholder?: string;
+    size?: InputSize;
+    disabled?: boolean;
+    invalid?: boolean;
+    /** Allow clearing back to `null` by selecting the chosen option again. Default `true`. */
+    clearable?: boolean;
+    /** Override the filter. Default is a case-insensitive substring match on `label`. */
+    filter?: (option: ComboboxOption<T>, query: string) => boolean;
+    /** Shown when nothing matches. */
+    emptyMessage?: ReactNode;
+    /** Custom option rendering. Receives the option and whether it is selected. */
+    renderOption?: (option: ComboboxOption<T>, selected: boolean) => ReactNode;
+    className?: string;
+}
+/**
+ * Single-select combobox with a text filter — an autocomplete.
+ *
+ * Implements the ARIA 1.2 combobox pattern, which is specific about a few things that are
+ * easy to get wrong and were all wrong in the `RoleComboBox` this replaces:
+ *
+ * - **`role="combobox"` belongs on the text input**, not on a wrapping `<div>`. The div
+ *   version means the state attributes sit on an element the user never focuses.
+ * - **`aria-activedescendant`, not focus, tracks the highlighted option.** Focus stays in
+ *   the input the whole time — moving DOM focus into the list breaks typing. This is the
+ *   one place a roving tabindex is the *wrong* answer, which is why this does not use
+ *   `useRovingFocus`.
+ * - **`aria-controls` points at the listbox**, which therefore needs a stable id.
+ * - The listbox is portaled, so it is not clipped by a `Card` or a scrolling container.
+ *
+ * For a command palette — filter over *actions* rather than a value — use `Command`.
+ */
+declare function Combobox<T extends string = string>({ options, value: valueProp, defaultValue, onValueChange, label, placeholder, size: sizeProp, disabled, invalid, clearable, filter, emptyMessage, renderOption, className, }: ComboboxProps<T>): react.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    /** Group heading. Items sharing a group render together, in the order given. */
+    group?: string;
+    icon?: ReactNode;
+    /** Trailing hint — pass `<Kbd>` elements. */
+    shortcut?: ReactNode;
+    /** Extra words to match on that are not in the label — synonyms, the old name of a page. */
+    keywords?: string[];
+    disabled?: boolean;
+    onSelect: () => void;
+}
+interface CommandProps {
+    items: CommandItem[];
+    /** Accessible name. Default `Command palette`. */
+    label?: string;
+    placeholder?: string;
+    emptyMessage?: ReactNode;
+    /** Called after any item is chosen — usually closes the containing dialog. */
+    onAfterSelect?: () => void;
+    autoFocus?: boolean;
+    className?: string;
 }
-declare function RoleComboBox({ value, onChange, options }: RoleComboBoxProps): react.JSX.Element;
+/**
+ * A ⌘K command palette — filter over *actions* and run one.
+ *
+ * The same ARIA combobox pattern as `Combobox`, and for the same reasons: `role="combobox"`
+ * on the input, focus never leaving it, and `aria-activedescendant` carrying the highlight.
+ * What differs is the intent, and it changes two behaviours:
+ *
+ * - Items are **commands, not values**. There is no selected state to display, no way to
+ *   clear, and choosing one runs a callback rather than setting anything.
+ * - Matching includes `keywords`, so "logout" can find "Sign out" — a palette is useless if
+ *   you have to already know the wording.
+ *
+ * This is the palette body only. Put it in a `Modal` for the usual ⌘K overlay; keeping the
+ * two separate means the palette can also be embedded in a page or a `Popover`, and the
+ * dialog semantics stay with the component that owns them.
+ *
+ * A live region reports the result count, because otherwise a screen reader user typing into
+ * the filter gets no feedback that the list changed underneath them.
+ */
+declare function Command({ items, label, placeholder, emptyMessage, onAfterSelect, autoFocus, className, }: CommandProps): react.JSX.Element;
 
 /**
  * The six status tones from the Figma design system.
@@ -384,29 +854,264 @@ interface EntityIconBadgeProps {
 }
 declare function EntityIconBadge({ size, tone, shape, bg, iconColor, children, className }: EntityIconBadgeProps): react.JSX.Element;
 
-interface CheckboxProps {
-    checked: boolean;
-    onChange: (checked: boolean) => void;
+type CheckControlSize = 'sm' | 'md';
+
+type CheckboxSize = CheckControlSize;
+interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'checked'> {
+    /** Controlled. Omit and pass `defaultChecked` for uncontrolled. */
+    checked?: boolean;
+    defaultChecked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
     label?: ReactNode;
-    disabled?: boolean;
+    /** Second line under the label. Matches Figma's `Supporting text` axis. */
+    description?: ReactNode;
+    /** Matches Figma's `Size` axis. Default `md`, which is 0.3.0's fixed 18px. */
+    size?: CheckboxSize;
     indeterminate?: boolean;
+    invalid?: boolean;
+    className?: string;
+}
+/**
+ * Checkbox built on a real `<input type="checkbox">`.
+ *
+ * Widened in 0.4.0 to match Figma's `Checkbox` set, which has `Size: sm | md`,
+ * `Text` and `Supporting text` axes — none of which existed in code, where the control was
+ * a fixed 18px with an optional single-line label and no `id`, `name`, `value`, `required`
+ * or ref. It also had no uncontrolled mode: `checked` and `onChange` were both required, so
+ * the simplest possible use site needed a `useState` in the consumer.
+ *
+ * `onChange` became `onCheckedChange` and takes a boolean, matching the rest of 0.4.0.
+ * The native `onChange` event shape is still reachable — the ref is forwarded to the real
+ * input, so `react-hook-form`'s `register()` works.
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type RadioGroupOrientation = 'vertical' | 'horizontal';
+interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Shared `name` for the underlying inputs. Generated when omitted. */
+    name?: string;
+    /** Names the group. Prefer wrapping in `FieldSet` + `FieldLegend` for a visible label. */
+    label?: string;
+    size?: CheckControlSize;
+    orientation?: RadioGroupOrientation;
+    disabled?: boolean;
+    invalid?: boolean;
+    required?: boolean;
+}
+/**
+ * Radio group. Matches the `Type=Radio` half of Figma's `Checkbox` set, and shares its
+ * geometry through `CheckControl`.
+ *
+ * Built on real `<input type="radio">` elements sharing a `name`, which is what buys the
+ * whole keyboard contract for free: arrow keys move *and* select, only the checked radio is
+ * in the tab sequence, and the group is announced as "2 of 4". A `div`-based
+ * `role="radiogroup"` has to reimplement all of that, and the version of this pattern the
+ * library already had — `SegmentedControl` before 0.4.0 — shipped with none of it.
+ *
+ * `role="radiogroup"` is still set explicitly rather than relying on a `<fieldset>`, so the
+ * group works with or without a visible legend.
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'checked'> {
+    value: string;
+    label?: ReactNode;
+    /** Second line under the label. Matches Figma's `Supporting text` axis. */
+    description?: ReactNode;
     className?: string;
 }
-/** Checkbox built on a real `<input type="checkbox">` — the hand-rolled `<div onClick>` version
- *  this replaces was not keyboard-reachable and exposed no checked state to assistive tech. */
-declare function Checkbox({ checked, onChange, label, disabled, indeterminate, className, }: CheckboxProps): react.JSX.Element;
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
 
 interface SegmentedControlOption {
     value: string;
     label: string;
+    disabled?: boolean;
 }
 interface SegmentedControlProps {
     options: SegmentedControlOption[];
-    value: string;
-    onChange?: (value: string) => void;
+    /** Controlled selection. Omit and pass `defaultValue` for uncontrolled. */
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Names the group. Required by the APG when the control has no visible label. */
+    label?: string;
+    className?: string;
+}
+/**
+ * Single-select segmented toggle.
+ *
+ * Through 0.3.0 this had **no ARIA whatsoever** — the selected segment was distinguished
+ * only by `bg-default shadow-panel`, so a screen reader user could not tell which of the
+ * segments was active. It is single-select, so `radiogroup`/`radio` is the correct pattern
+ * rather than a row of `aria-pressed` buttons: it announces "2 of 3" and lets the arrow
+ * keys move between options, which a toggle-button group does not.
+ *
+ * `onChange` was also optional, so `<SegmentedControl options value />` rendered a control
+ * that looked interactive and silently did nothing.
+ */
+declare function SegmentedControl({ options, value: valueProp, defaultValue, onValueChange, label, className, }: SegmentedControlProps): react.JSX.Element;
+
+interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'onChange' | 'value'> {
+    value?: number;
+    defaultValue?: number;
+    onValueChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    /** Matches Figma's `Label` / `Has Label`. */
+    label?: ReactNode;
+    /** Matches Figma's `Description` / `Has Description`. */
+    description?: ReactNode;
+    /** Show the current value at the right of the label row. */
+    showValue?: boolean;
+    /** Formats the displayed and announced value — percentages, currency, durations. */
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+/**
+ * Range slider. Matches Figma's `Slider Field` (`State: Default | Disabled`, with label and
+ * description slots).
+ *
+ * A native `<input type="range">`, deliberately. It arrives with the entire APG slider
+ * contract already implemented — arrow keys, Page Up/Down, Home/End, the correct
+ * `aria-valuenow`/`valuemin`/`valuemax`, touch and pointer dragging, and RTL handling — and
+ * a `div`-based slider has to rebuild all of it. The track and thumb are styled through the
+ * vendor pseudo-elements instead, which is the one place raw `[&::-webkit-…]` selectors are
+ * the right tool.
+ *
+ * `formatValue` feeds `aria-valuetext`, because "70" announced on a price slider is
+ * meaningless where "£70" is not.
+ */
+declare const Slider: react.ForwardRefExoticComponent<SliderProps & react.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    children: ReactNode;
+    size?: InputSize;
+}
+/**
+ * A standalone `<label>`.
+ *
+ * `FieldLabel` is the one to reach for inside a `Field` — it picks up the generated id,
+ * the size and the disabled state from context automatically. This is for the cases that
+ * are not a field: naming a `SegmentedControl`, a group of buttons, or any control the
+ * library does not wrap. It still reads `Field` context when it happens to be inside one,
+ * so it degrades to `FieldLabel` behaviour rather than silently losing the association.
+ */
+declare const Label: react.ForwardRefExoticComponent<LabelProps & react.RefAttributes<HTMLLabelElement>>;
+
+type CalendarMode = 'single' | 'range';
+interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+interface CalendarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    mode?: CalendarMode;
+    /** Selected date in `single` mode. */
+    value?: Date | null;
+    /** Selected range in `range` mode. */
+    range?: DateRange;
+    onSelect?: (value: Date) => void;
+    onRangeChange?: (range: DateRange) => void;
+    /** Month shown on mount. Defaults to the selection's month, else today. */
+    defaultMonth?: Date;
+    min?: Date;
+    max?: Date;
+    /** Return `true` to disable a day. Combined with `min`/`max`. */
+    isDateDisabled?: (date: Date) => boolean;
+    /** 0 = Sunday, 1 = Monday. Default `1`. */
+    weekStartsOn?: 0 | 1;
+    /** BCP 47 tag for month, weekday and announced day names. Default: the browser's. */
+    locale?: string;
+    /** Names the grid. Default `Calendar`. */
+    label?: string;
+}
+/**
+ * Month grid. Matches Figma's `Calendar`, `Calendar Button`
+ * (`State: Default | Hover | Active | Disabled | Range | Range Disabled | Hidden`),
+ * `Calendar Select Group` and `Calendar Month/Year Field`.
+ *
+ * The code had no calendar at all — `DatePicker` was a bare `<input type="date">` with
+ * Chromium-only indicator styling, so there was nothing to build a range picker on, no
+ * locale control and no min/max navigation.
+ *
+ * The keyboard model is the APG date-grid pattern, and it is the whole reason this is not
+ * just a table of buttons:
+ *
+ * - **One tab stop.** Tab enters the grid once and leaves it; arrows move within. A grid of
+ *   42 individually tabbable buttons takes 42 presses to get past.
+ * - **Arrows cross month boundaries.** Pressing Left on the 1st moves to the previous
+ *   month's last day and pages the view, rather than dead-ending.
+ * - **PageUp/PageDown** move by month, **Home/End** to the start/end of the week.
+ * - Each day's accessible name is the full date, not the number — "14" tells a screen
+ *   reader user nothing.
+ */
+declare function Calendar({ mode, value, range, onSelect, onRangeChange, defaultMonth, min, max, isDateDisabled, weekStartsOn, locale, label, className, ...rest }: CalendarProps): react.JSX.Element;
+
+type InputGroupAlign = 'inline-start' | 'inline-end' | 'block-start' | 'block-end';
+interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: InputSize;
+    invalid?: boolean;
+    disabled?: boolean;
+}
+/**
+ * A bordered shell that holds an input alongside addons — a prefix, a unit suffix, a
+ * search glyph, a clear button, a copy button.
+ *
+ * This generalises what `PasswordInput` did as a one-off. `Input` has `leadingIcon`,
+ * `trailingIcon` and `trailingAction` props, which works for a single decoration but forces
+ * absolute positioning and per-size padding maps to keep the text clear of it. Here the
+ * addons are real flex siblings, so the input's text box simply ends where the addon
+ * begins and nothing has to be measured.
+ *
+ * The border and focus ring live on the group, not the input — so focusing the input rings
+ * the whole control, which is what a user perceives as "the field".
+ */
+declare const InputGroup: react.ForwardRefExoticComponent<InputGroupProps & react.RefAttributes<HTMLDivElement>>;
+interface InputGroupInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+}
+/**
+ * The input inside an `InputGroup`. Carries no border, background or ring of its own —
+ * the group owns all three.
+ */
+declare const InputGroupInput: react.ForwardRefExoticComponent<InputGroupInputProps & react.RefAttributes<HTMLInputElement>>;
+interface InputGroupAddonProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+    align?: InputGroupAlign;
+    /**
+     * `true` when the addon is decoration — an icon, a unit. Decorative addons are
+     * `aria-hidden` and ignore pointer events, so they never steal a click meant for the
+     * text box. Default `true`; set `false` for an addon containing a control.
+     */
+    decorative?: boolean;
+}
+declare const InputGroupAddon: react.ForwardRefExoticComponent<InputGroupAddonProps & react.RefAttributes<HTMLSpanElement>>;
+interface InputGroupTextProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/** Static text inside the shell — a currency symbol, a domain suffix, a unit. */
+declare const InputGroupText: react.ForwardRefExoticComponent<InputGroupTextProps & react.RefAttributes<HTMLSpanElement>>;
+interface SearchInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    size?: InputSize;
+    /** Renders a clear button once there is a value. */
+    onClear?: () => void;
+    /** Accessible name. Default `Search`. */
+    label?: string;
     className?: string;
 }
-declare function SegmentedControl({ options, value, onChange, className }: SegmentedControlProps): react.JSX.Element;
+/**
+ * Search field. Matches Figma's `Search` set — `Size: Large | Medium | Small`,
+ * `State: Default | Disabled`, `Value Type: Filled | Placeholder`.
+ *
+ * `type="search"` rather than `type="text"`: it gets the platform's search affordances and
+ * is announced as a search field. The clear button is a real button so it is keyboard
+ * reachable, unlike the UA-provided cancel widget which is pointer-only in most browsers
+ * and is therefore suppressed.
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
 
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 /**
@@ -417,20 +1122,32 @@ type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
 type ModalTone = 'default' | 'info' | 'positive' | 'warning' | 'danger';
 type ModalFooterAlign = 'start' | 'between' | 'end';
 interface ModalProps {
-    isOpen: boolean;
-    onClose: () => void;
+    open: boolean;
+    /** Fired with `false` on Escape, an outside press, or the close button. */
+    onOpenChange: (open: boolean) => void;
     /**
-     * Accessible name for the dialog. Required, so a slot-composed modal can never ship
-     * unnamed. Was `title` in 0.2.0, renamed because `title` is also an HTML attribute
-     * that renders a tooltip.
+     * Accessible name. Only needed when the dialog renders no `ModalTitle` — with one, the
+     * name comes from the heading itself via `aria-labelledby`, so it cannot drift.
      */
-    label: string;
+    label?: string;
     children: ReactNode;
     size?: ModalSize;
+    /**
+     * `alertdialog` for a dialog that interrupts to confirm or warn — it makes assistive
+     * tech announce the body immediately rather than waiting to be browsed. `ConfirmDialog`
+     * passes it; plain content dialogs should stay `dialog`.
+     */
+    role?: 'dialog' | 'alertdialog';
     /** Renders the top-right close button. */
     showClose?: boolean;
     /** Applied to the panel. With `cn`, `className="sm:max-w-[560px]"` beats `size`. */
     className?: string;
+    /** Call `preventDefault()` to keep the dialog open — e.g. unsaved input. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Call `preventDefault()` to keep the dialog open. */
+    onInteractOutside?: (event: PointerEvent) => void;
+    /** Focus this on open instead of the first tabbable element. */
+    initialFocus?: React.RefObject<HTMLElement | null>;
 }
 /**
  * A centred dialog above `sm`, a bottom sheet below it.
@@ -451,11 +1168,11 @@ declare function ModalHeader({ children, tone, divider, className, ...rest }: Mo
 interface ModalTitleProps extends HTMLAttributes<HTMLHeadingElement> {
     children: ReactNode;
 }
-declare function ModalTitle({ children, className, ...rest }: ModalTitleProps): react.JSX.Element;
+declare function ModalTitle({ children, className, id, ...rest }: ModalTitleProps): react.JSX.Element;
 interface ModalDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
     children: ReactNode;
 }
-declare function ModalDescription({ children, className, ...rest }: ModalDescriptionProps): react.JSX.Element;
+declare function ModalDescription({ children, className, id, ...rest }: ModalDescriptionProps): react.JSX.Element;
 interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
@@ -468,10 +1185,263 @@ interface ModalFooterProps extends HTMLAttributes<HTMLDivElement> {
 }
 declare function ModalFooter({ children, align, divider, className, ...rest }: ModalFooterProps): react.JSX.Element;
 
+type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+type FloatingAlign = 'start' | 'center' | 'end';
+
+interface TooltipProps {
+    /**
+     * The trigger. Must be a single focusable element — a tooltip that can only be reached
+     * with a pointer is invisible to keyboard and touch users, so this deliberately does not
+     * wrap its child in a span to make it hoverable.
+     */
+    children: ReactElement;
+    /** Bold first line. Matches Figma's `Title` property. */
+    title?: ReactNode;
+    /** Supporting line. Matches Figma's `Body` / `Has Body`. */
+    body?: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    /** Delay before opening, in ms. Default `150`. */
+    openDelay?: number;
+    /** Delay before closing, in ms. Default `0`. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * `describedby` — the trigger keeps its own name and the tooltip adds detail. This is
+     * almost always what you want. `labelledby` makes the tooltip *be* the trigger's name,
+     * for an icon-only button with no other text. Default `describedby`.
+     *
+     * Deliberately not called `as`: everywhere else in this library `as` chooses the rendered
+     * element, and reusing it for something else here would be a trap (it also makes
+     * `jsx-a11y`'s polymorphic-component checking treat the value as a tag name).
+     */
+    association?: 'describedby' | 'labelledby';
+    className?: string;
+}
+/**
+ * Tooltip. Matches Figma's `Tooltip` set — `Placement: Top | Left | Right | Bottom`, with
+ * a title and an optional body.
+ *
+ * Things this gets right that a naive tooltip does not:
+ *
+ * - **Keyboard and touch reachable.** Opens on `focus` as well as hover, and closes on
+ *   Escape. A hover-only tooltip is inaccessible to half the people using it.
+ * - **Referenced, not floating text.** The panel is wired to the trigger with
+ *   `aria-describedby` (or `aria-labelledby`), so it is announced *with* the control
+ *   rather than being an orphan region a screen reader may never reach.
+ * - **`role="tooltip"` and no interactive content.** A tooltip cannot be hovered into or
+ *   focused, so anything interactive inside it is unreachable — use `Popover` for that.
+ * - Not modal: no focus trap, no scroll lock, no inert background.
+ */
+declare function Tooltip({ children, title, body, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, association, className, }: TooltipProps): react.JSX.Element | null;
+
+interface PopoverProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Trap focus, lock scroll and mark the rest of the page inert. Default `false`.
+     *
+     * A popover is normally non-modal: the page behind stays usable, and Tab moves out of the
+     * panel and on through the document. Set `modal` when the panel is a small form whose
+     * background must not be touched until it is dismissed.
+     */
+    modal?: boolean;
+}
+/**
+ * A floating panel anchored to a trigger, for **interactive** content.
+ *
+ * The distinction from `Tooltip` is not visual and it matters: a tooltip cannot be hovered
+ * into or focused, so anything interactive inside one is unreachable. If the panel holds a
+ * link, a button or a field, it has to be a popover — which means a real trigger with
+ * `aria-expanded`/`aria-controls`, focus moving into the panel on open, and focus returning
+ * to the trigger on close. All of that is here; none of it is in `Tooltip`, by design.
+ */
+declare function Popover({ children, open: openProp, defaultOpen, onOpenChange, modal, }: PopoverProps): react.JSX.Element;
+interface PopoverTriggerProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    asChild?: boolean;
+}
+declare function PopoverTrigger({ children, asChild, className, ...rest }: PopoverTriggerProps): react.JSX.Element;
+interface PopoverContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+    /** Accessible name for the panel. Falls back to being labelled by the trigger. */
+    label?: string;
+}
+declare function PopoverContent({ children, side, align, sideOffset, label, className, ...rest }: PopoverContentProps): react.JSX.Element | null;
+
+interface HoverCardProps {
+    /** The trigger. Must be a single focusable element — normally a link. */
+    children: ReactElement;
+    /** Panel content. May contain links and text; see the note on interactivity below. */
+    content: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    /** Delay before opening, in ms. Default `400`. */
+    openDelay?: number;
+    /** Delay before closing, in ms. Default `200`. */
+    closeDelay?: number;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+/**
+ * A preview panel that appears on hover — a user card on an @mention, a page preview on a
+ * link.
+ *
+ * Sits between `Tooltip` and `Popover`, and the difference is about intent rather than
+ * looks:
+ *
+ * - `Tooltip` is a short label. It cannot be entered, so it must hold no controls.
+ * - `HoverCard` is supplementary content that *can* be entered — the panel stays open while
+ *   the pointer is inside it, so a link in the preview is reachable. It is opened by hover
+ *   and focus, never by click.
+ * - `Popover` is opened deliberately by click and is the only one of the three appropriate
+ *   for content the user must act on.
+ *
+ * **It is supplementary by contract.** Hover has no touch equivalent, so anything only
+ * reachable here is unreachable on a phone. The panel is `aria-labelledby` the trigger and
+ * exposed as a group; the trigger keeps its own name and destination.
+ *
+ * The close delay is what makes the panel usable: without it, moving the pointer from the
+ * trigger to the panel crosses a gap and dismisses the thing you were reaching for.
+ */
+declare function HoverCard({ children, content, side, align, openDelay, closeDelay, open: openProp, defaultOpen, onOpenChange, className, }: HoverCardProps): react.JSX.Element | null;
+
+type OverlayItemTone = 'default' | 'danger';
+
+type MenuItemTone = OverlayItemTone;
+interface MenuItemProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onSelect'> {
+    children: ReactNode;
+    onSelect?: () => void;
+    tone?: MenuItemTone;
+    disabled?: boolean;
+    /** Leading glyph. Marked decorative automatically. Matches Figma's `Icon` / `Has Icon`. */
+    icon?: ReactNode;
+    /** Second line. Matches Figma's `Description` / `Has Description`. */
+    description?: ReactNode;
+    /** Trailing shortcut hint. Matches Figma's `Shortcut` / `Has Shortcut`. */
+    shortcut?: ReactNode;
+    /** Typeahead match text, when `children` is not a plain string. */
+    textValue?: string;
+}
+declare function MenuItem({ children, onSelect, tone, disabled, icon, description, shortcut, textValue, className, ...rest }: MenuItemProps): react.JSX.Element;
+interface MenuCheckboxItemProps extends Omit<MenuItemProps, 'onSelect' | 'icon'> {
+    checked: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+}
+declare function MenuCheckboxItem({ children, checked, onCheckedChange, disabled, tone, shortcut, textValue, className, ...rest }: MenuCheckboxItemProps): react.JSX.Element;
+interface MenuRadioGroupProps {
+    children: ReactNode;
+    value?: string;
+    onValueChange?: (value: string) => void;
+}
+declare function MenuRadioGroup({ children, value, onValueChange }: MenuRadioGroupProps): react.JSX.Element;
+interface MenuRadioItemProps extends Omit<MenuItemProps, 'onSelect' | 'icon'> {
+    value: string;
+}
+declare function MenuRadioItem({ children, value, disabled, tone, textValue, className, ...rest }: MenuRadioItemProps): react.JSX.Element;
+interface MenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the group. Rendered as a heading when set. */
+    label?: string;
+}
+declare function MenuGroup({ children, label, className, ...rest }: MenuGroupProps): react.JSX.Element;
+interface MenuLabelProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** A non-interactive heading inside the menu. Matches Figma's `Menu Heading`. */
+declare function MenuLabel({ children, className, ...rest }: MenuLabelProps): react.JSX.Element;
+interface MenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+}
+/** Matches Figma's `Menu Separator`. Was a bare unlabelled `div` before 0.4.0. */
+declare function MenuSeparator({ className, ...rest }: MenuSeparatorProps): react.JSX.Element;
+interface MenuShortcutProps extends HTMLAttributes<HTMLSpanElement> {
+    children: ReactNode;
+}
+/** Trailing keyboard hint, for use outside an item's `shortcut` prop. */
+declare function MenuShortcut({ children, className, ...rest }: MenuShortcutProps): react.JSX.Element;
+
+interface ContextMenuProps {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Right-click menu.
+ *
+ * Shares every item and the whole keyboard contract with `DropdownMenu` via `menu-core`;
+ * the only difference is how it opens — at the pointer, with no trigger element to anchor
+ * to, so it is positioned from coordinates rather than by Floating UI's reference/floating
+ * pair.
+ *
+ * **A context menu must never be the only way to reach an action.** `contextmenu` fires on
+ * right-click and on the Windows Menu / Shift+F10 keys, but not on touch, and plenty of
+ * users never right-click at all. `ContextMenuTrigger` therefore also opens on Shift+F10 and
+ * the ContextMenu key, and anything in here should have a visible equivalent elsewhere —
+ * usually a `DropdownMenu` on the same row.
+ */
+declare function ContextMenu({ children, open: openProp, defaultOpen, onOpenChange, }: ContextMenuProps): react.JSX.Element;
+interface ContextMenuTriggerProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    disabled?: boolean;
+}
+declare function ContextMenuTrigger({ children, disabled, className, ...rest }: ContextMenuTriggerProps): react.JSX.Element;
+interface ContextMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Minimum gap from the viewport edge, in px. Default `8`. */
+    collisionPadding?: number;
+}
+declare function ContextMenuContent({ children, collisionPadding, className, ...rest }: ContextMenuContentProps): react.JSX.Element | null;
+
+interface MenubarProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Names the menubar. Required by the APG. */
+    label: string;
+}
+/**
+ * An application menu bar — a horizontal row of menus, as in a desktop app.
+ *
+ * Two things distinguish it from a row of `DropdownMenu`s, and both are in the APG:
+ *
+ * - **The bar is one tab stop.** Left/Right move between the top-level menus; Tab leaves the
+ *   bar entirely. A row of independent dropdowns is N tab stops.
+ * - **Only one menu is open at a time**, and once any is open, moving along the bar switches
+ *   directly to the next menu rather than closing and reopening.
+ *
+ * Items and the vertical keyboard contract come from `menu-core`, shared with
+ * `DropdownMenu` and `ContextMenu`.
+ */
+declare function Menubar({ children, label, className, ...rest }: MenubarProps): react.JSX.Element;
+interface MenubarMenuProps {
+    children: ReactNode;
+    /** Identifies this menu within the bar. */
+    value: string;
+}
+/** One menu in the bar. Wraps a `MenubarTrigger` and a `MenubarContent`. */
+declare function MenubarMenu({ children, value }: MenubarMenuProps): react.JSX.Element;
+interface MenubarTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+}
+declare function MenubarTrigger({ children, className, ...rest }: MenubarTriggerProps): react.JSX.Element;
+interface MenubarContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function MenubarContent({ children, className, ...rest }: MenubarContentProps): react.JSX.Element | null;
+
+type DrawerSide = 'right' | 'left';
 interface DrawerProps {
-    /** Required as of 0.3.0 — every overlay is now `isOpen` + `onClose`. */
-    isOpen: boolean;
-    onClose: () => void;
+    open: boolean;
+    /** Fired with `false` on Escape, an outside press, or the close button. */
+    onOpenChange: (open: boolean) => void;
     /** Header content (left side). The copies this replaces differ only here — a status badge +
      *  title in one, an avatar + title + category in another — so it is a slot, not props. */
     header: ReactNode;
@@ -481,18 +1451,34 @@ interface DrawerProps {
     footerAlign?: 'end' | 'between';
     /** Panel width. Defaults to the `w-[440px] max-w-[90vw]` shared by every existing drawer. */
     width?: string;
-    /** Accessible name for the dialog. */
-    label?: string;
+    /** Which edge the panel slides in from. Default `right`. */
+    side?: DrawerSide;
+    /**
+     * Accessible name for the dialog. **Required** as of 0.4.0.
+     *
+     * It was optional through 0.3.0 while `Modal.label` was required, which meant the
+     * public API allowed a `role="dialog" aria-modal="true"` element with no accessible
+     * name at all — a screen reader announced "dialog" and nothing else. Unlike `Modal`
+     * there is no `DrawerTitle` part to infer a name from, because `header` is a free
+     * slot, so the string is the only place it can come from.
+     */
+    label: string;
     className?: string;
+    /** Call `preventDefault()` to keep the drawer open — e.g. unsaved input. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Call `preventDefault()` to keep the drawer open. */
+    onInteractOutside?: (event: PointerEvent) => void;
+    /** Focus this on open instead of the first tabbable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
 }
 /**
- * Right-hand side panel. Handles Esc, traps Tab focus, and restores focus to the
- * trigger on close.
+ * Side panel. Handles Esc, traps Tab focus, locks background scroll, marks the rest of
+ * the page inert, and restores focus to the trigger on close.
  */
 declare function Drawer(props: DrawerProps): react.JSX.Element | null;
 
 interface ConfirmDialogProps {
-    isOpen: boolean;
+    open: boolean;
     title: string;
     subtitle?: string;
     /**
@@ -513,8 +1499,8 @@ interface ConfirmDialogProps {
     children?: ReactNode;
     className?: string;
     onConfirm: () => void;
-    /** Renamed from `onCancel` in 0.3.0 — every overlay now uses `isOpen` + `onClose`. */
-    onClose: () => void;
+    /** Fired with `false` on cancel, Escape, or an outside press. */
+    onOpenChange: (open: boolean) => void;
 }
 /**
  * The in-app replacement for `window.confirm`: a title, an optional body, and a
@@ -525,11 +1511,10 @@ interface ConfirmDialogProps {
  * is the thing call sites get wrong when they hand-roll a confirm. For any other
  * shape, compose `Modal` and its parts directly.
  */
-declare function ConfirmDialog({ isOpen, title, subtitle, tone, size, confirmLabel, cancelLabel, confirmVariant, isConfirming, confirmingLabel, children, className, onConfirm, onClose, }: ConfirmDialogProps): react.JSX.Element;
+declare function ConfirmDialog({ open, title, subtitle, tone, size, confirmLabel, cancelLabel, confirmVariant, isConfirming, confirmingLabel, children, className, onConfirm, onOpenChange, }: ConfirmDialogProps): react.JSX.Element;
 
 interface NoteConfirmModalProps {
-    /** Required as of 0.3.0 — this is now a controlled overlay like every other. */
-    isOpen: boolean;
+    open: boolean;
     title: string;
     subtitle?: string;
     tone?: ModalTone;
@@ -543,8 +1528,14 @@ interface NoteConfirmModalProps {
     submittingLabel?: string;
     isSubmitting?: boolean;
     className?: string;
-    onClose: () => void;
+    /** Fired with `false` on cancel, Escape, or an outside press. */
+    onOpenChange: (open: boolean) => void;
     onConfirm: (note: string) => void;
+    /**
+     * Asked before an Escape or outside press throws away a note that has content.
+     * Return `false` to keep the dialog open. Defaults to `window.confirm`.
+     */
+    onDiscardNote?: (note: string) => boolean;
 }
 /**
  * Confirm dialog that collects a free-text note — approvals, rejections, information
@@ -552,45 +1543,161 @@ interface NoteConfirmModalProps {
  *
  * Kept as a preset because it owns state, and a composition cannot.
  */
-declare function NoteConfirmModal({ isOpen, ...rest }: NoteConfirmModalProps): react.JSX.Element | null;
+declare function NoteConfirmModal({ open, ...rest }: NoteConfirmModalProps): react.JSX.Element | null;
 
-interface DropdownMenuItem {
-    label: string;
-    onSelect: () => void;
-    tone?: 'default' | 'danger';
-    disabled?: boolean;
-    /** Draw a separator above this item. */
-    separatorBefore?: boolean;
-}
+/**
+ * Overflow / row-actions menu, rebuilt in 0.4.0.
+ *
+ * The previous version declared `role="menu"` and `role="menuitem"` and implemented none of
+ * the WAI-ARIA menu contract. Announcing a pattern you do not implement is worse than
+ * announcing nothing, because a screen reader tells the user which keys should work. Fixed:
+ * arrow keys, Home/End and typeahead; a roving tabindex (every item used to be a natively
+ * tabbable `<button>`, so Tab walked all of them); focus moving into the menu on open and
+ * back to the trigger on close; a portal, so the panel is no longer clipped by `Card`'s
+ * `overflow-hidden` or `DataTable`'s `overflow-x-auto` — both named in its own doc comment
+ * as the reason it exists; collision handling instead of a static `left`/`right`; correct
+ * ARIA ownership; and `open`/`onOpenChange`, where open state used to be unreachable.
+ *
+ * The items and keyboard model now live in `menu-core`, shared with `ContextMenu` and
+ * `Menubar`.
+ *
+ * Not implemented: submenus. Doing them properly needs hover intent and a safe-travel
+ * polygon between trigger and panel, and a half-built version is worse than none — nest a
+ * second `DropdownMenu` in the meantime.
+ */
 interface DropdownMenuProps {
-    items: DropdownMenuItem[];
-    /** Custom trigger content. Defaults to a `⋯` overflow button. */
-    trigger?: ReactNode;
-    /** Accessible name for the trigger, e.g. `Open actions for Admin`. */
-    label: string;
-    align?: 'left' | 'right';
-    className?: string;
+    children: ReactNode;
+    /** Controlled open state. Omit for uncontrolled. */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }
-/** Overflow / row-actions menu.
- *
- *  Keeps the outside-click dismissal and `aria-haspopup`/`aria-expanded` wiring from the
- *  hand-rolled `RowMenu` it replaces, and adds Esc-to-close. `mousedown` is stopped at the
- *  wrapper so the menu works inside clickable table rows. */
-declare function DropdownMenu({ items, trigger, label, align, className, }: DropdownMenuProps): react.JSX.Element;
+declare function DropdownMenu({ children, open: openProp, defaultOpen, onOpenChange, }: DropdownMenuProps): react.JSX.Element;
+interface DropdownMenuTriggerProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    /** Render the child element instead of the default overflow button. */
+    asChild?: boolean;
+    /** Accessible name for the default `⋯` button. Ignored when `asChild` is set. */
+    label?: string;
+}
+declare function DropdownMenuTrigger({ children, asChild, label, ...rest }: DropdownMenuTriggerProps): react.JSX.Element;
+interface DropdownMenuContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    side?: FloatingSide;
+    align?: FloatingAlign;
+    sideOffset?: number;
+}
+declare function DropdownMenuContent({ children, side, align, sideOffset, className, ...rest }: DropdownMenuContentProps): react.JSX.Element | null;
+
+interface PortalProps {
+    children: ReactNode;
+    /**
+     * Where to mount. Defaults to `document.body`.
+     *
+     * Pass a container when the app renders inside a shadow root or a scoped theme
+     * wrapper — the portal must stay inside whatever element the design tokens are
+     * declared on, or every `var(--color-*)` resolves to nothing.
+     */
+    container?: HTMLElement | null;
+}
+/**
+ * Renders `children` outside the parent DOM hierarchy.
+ *
+ * Until 0.4.0 this library never called `createPortal` — `Modal`, `Drawer`,
+ * `DropdownMenu`, `RoleComboBox` and the sidebar menu all rendered inline. Two concrete
+ * failures came out of that:
+ *
+ * - `DropdownMenu` was positioned `absolute` inside a `relative` wrapper, so it was
+ *   clipped by `Card`'s `overflow-hidden` and by `DataTable`'s `overflow-x-auto` — the
+ *   two places its own doc comment said it was for.
+ * - `position: fixed` resolves against the nearest ancestor with `transform`, `filter`,
+ *   `backdrop-filter`, `perspective`, `will-change` or `contain`, so a `Modal` opened
+ *   from inside any transformed ancestor was positioned against that ancestor rather
+ *   than the viewport, and `z-50` was scoped to a stacking context it did not control.
+ *
+ * Mounting is deferred to an effect so the server render and the first client render
+ * agree — reaching for `document` during render breaks SSR and hydration.
+ */
+declare function Portal({ children, container }: PortalProps): react.ReactPortal | null;
 
 /** The one scrim for every overlay primitive.
  *
  *  Modal and Drawer both reference this constant, so there is a single place to change
  *  the dimming behind a dialog. Backed by `--color-background-utilities-overlay`. */
 declare const OVERLAY_SCRIM = "bg-overlay";
-/** Esc-to-close, a Tab focus trap, and focus restore for a mounted overlay.
- *
- *  None of the hand-rolled drawers/modals this replaces handled Esc or trapped focus —
- *  they closed on scrim click only. Pass the ref of the panel element (not the scrim). */
-declare function useOverlayDismiss(onClose: () => void, panelRef: RefObject<HTMLElement | null>): void;
+interface UseOverlayDismissOptions {
+    /** Called when the overlay should close. */
+    onDismiss: () => void;
+    /** The panel element — not the scrim. */
+    panelRef: RefObject<HTMLElement | null>;
+    /** Set `false` to suspend every behaviour without unmounting. Default `true`. */
+    active?: boolean;
+    /** Default `true`. */
+    closeOnEscape?: boolean;
+    /** Default `true`. */
+    closeOnOutsidePress?: boolean;
+    /** Keep Tab inside the panel. Default `true`. Turn off for non-modal surfaces. */
+    trapFocus?: boolean;
+    /** Default `true`. */
+    lockScroll?: boolean;
+    /** Mark sibling content `inert`. Default `true`. */
+    inertBackground?: boolean;
+    /**
+     * Move focus into the panel on mount. Default `true`.
+     *
+     * Set `false` when the overlay manages its own entry point — a menu with a roving
+     * tabindex exposes exactly one focusable item at a time, so a generic
+     * "focus the first tabbable element" scan would fight it.
+     */
+    autoFocus?: boolean;
+    /** Focus this instead of the first tabbable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /**
+     * Restore focus here instead of wherever it was when the overlay opened.
+     *
+     * Passing the ref at all takes over the restore: a `current` of `null` means "leave
+     * focus alone", not "fall back to the previously focused element". `Menubar` depends on
+     * that — while it is switching from one menu to a sibling, focus already belongs to the
+     * sibling and pulling it back to the closing menu's trigger reopens the menu.
+     */
+    returnFocus?: RefObject<HTMLElement | null>;
+    /** Call `preventDefault()` to veto the close — e.g. a form with unsaved input. */
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    /** Call `preventDefault()` to veto the close. */
+    onInteractOutside?: (event: PointerEvent) => void;
+}
+/** Esc-to-close, a Tab focus trap, scroll lock, an inert background, and focus restore
+ *  for a mounted overlay. Pass the ref of the panel element (not the scrim).
+ *
+ *  Rewritten in 0.4.0. The previous version handled Esc, Tab and focus restore, and had
+ *  the following defects — each is now covered by a test:
+ *
+ *  - **One Escape closed every open overlay.** Each overlay put its own listener on
+ *    `document` and called `stopPropagation`, which stops propagation to other *nodes*,
+ *    not to sibling listeners on the same node. Dismissal is now gated on `isTopmost`
+ *    from the shared layer stack.
+ *  - **A text-selection drag dismissed the dialog.** Outside-press used `click`, whose
+ *    target for a drag is the nearest common ancestor — the scrim. Now `pointerdown`.
+ *  - **Forward Tab could walk out of the panel.** The trap only compared against the
+ *    last tabbable element; once focus was outside by any other route, Tab roamed the
+ *    background freely. A `focusin` guard now pulls focus back.
+ *  - **Fixed-position elements were excluded from the trap.** The visibility filter was
+ *    `offsetParent !== null`, which is `null` for `position: fixed`. Element collection
+ *    is delegated to `tabbable`, which also honours real tab order (a positive
+ *    `tabindex` reorders the sequence, so DOM order was the wrong answer), `inert`,
+ *    `[aria-disabled]`, `contenteditable`, `<summary>`, media with controls, and
+ *    descendants of a disabled `<fieldset>`.
+ *  - **Initial focus was a silent no-op for a content-only dialog.** It fell back to
+ *    focusing the panel, which does nothing without `tabIndex="-1"`. The hook now sets
+ *    that itself, and retries once content arrives asynchronously.
+ *  - **Focus restore could land on a detached node**, resetting focus to `<body>`.
+ *    Now checked with `isConnected`.
+ *  - No opt-out existed for either dismissal route. Both are now vetoable.
+ */
+declare function useOverlayDismiss({ onDismiss, panelRef, active, closeOnEscape, closeOnOutsidePress, trapFocus, lockScroll, inertBackground, autoFocus, initialFocus, returnFocus, onEscapeKeyDown, onInteractOutside, }: UseOverlayDismissOptions): void;
 
 /**
- * `clsx` + `tailwind-merge`.
+ * `clsx` + `tailwind-merge`, taught this system's type scale.
  *
  * Use this instead of bare `clsx` in any component whose `className` prop is meant to
  * *override* a base utility — the composable `Card*` and `Modal*` parts, and anything
@@ -617,76 +1724,313 @@ type CardTone = 'default' | 'brand' | 'positive' | 'warning' | 'danger';
 type CardFooterAlign = 'start' | 'between' | 'end';
 interface CardProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    /** `2xl` suits detail pages, `xl` section panels, `lg` dense or nested cards. */
-    radius?: CardRadius;
+    /** `2xl` suits detail pages, `xl` section panels, `lg` dense or nested cards. */
+    radius?: CardRadius;
+    /**
+     * Surface tint. This is a prop rather than a `className` because a tone has to
+     * un-set the base `border-default bg-default` pair, not add to it.
+     */
+    tone?: CardTone;
+}
+/**
+ * The card shell. Composed from `CardHeader`, `CardBody` and `CardFooter` — or from
+ * nothing at all, if you want content to bleed to the edges (drop `CardBody` and put
+ * a `DataTable` straight inside).
+ *
+ * Replaces `SectionCard` and the two monolithic cards that shipped beside it,
+ * `AlertCard` and `BenchmarkCard`. Both of those are now documented compositions; see
+ * the Cards page. The vocabulary follows shadcn/ui so it is already familiar, with
+ * `CardBody` in place of its `CardContent`.
+ */
+declare function Card({ children, radius, tone, className, ...rest }: CardProps): react.JSX.Element;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+    /** Bottom rule separating the header from the body. */
+    divider?: boolean;
+}
+/**
+ * Header row. Holds `CardTitle`, `CardDescription` and an optional `CardAction`.
+ *
+ * The `has-[…]` selector switches to a two-column grid only when a `CardAction` is
+ * present, which is what lets title, description and action share a header with no
+ * wrapper div and no stray gap when the action is absent.
+ */
+declare function CardHeader({ children, size, divider, className, ...rest }: CardHeaderProps): react.JSX.Element;
+interface CardTitleProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    size?: CardSize;
+    /** Heading level. Defaults to `p`; use h2/h3 where the page has a real hierarchy. */
+    as?: 'h2' | 'h3' | 'h4' | 'p';
+}
+declare function CardTitle({ children, size, as: Tag, className, ...rest }: CardTitleProps): react.JSX.Element;
+interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+    children: ReactNode;
+    /** Overrides the size inherited from the enclosing `CardHeader`. */
+    size?: CardSize;
+}
+declare function CardDescription({ children, size, className, ...rest }: CardDescriptionProps): react.JSX.Element;
+interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+/** Right-hand slot in a `CardHeader` — a button, a count, a status badge, a menu. */
+declare function CardAction({ children, className, ...rest }: CardActionProps): react.JSX.Element;
+interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+}
+/**
+ * The content region. A vertical stack by default.
+ *
+ * Because this file uses `cn`, `className` genuinely overrides the base — so
+ * `className="flex-row items-center"` gives you a row, and
+ * `className="grid grid-cols-3"` a grid. That is what makes the `AlertCard` and
+ * `BenchmarkCard` rebuilds possible without a `layout` prop.
+ */
+declare function CardBody({ children, size, className, ...rest }: CardBodyProps): react.JSX.Element;
+interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    size?: CardSize;
+    divider?: boolean;
+    align?: CardFooterAlign;
+}
+/** Action row at the foot of a card. Mirrors `ModalFooter` and `Drawer`'s footer. */
+declare function CardFooter({ children, size, divider, align, className, ...rest }: CardFooterProps): react.JSX.Element;
+
+type AccordionType = 'single' | 'multiple';
+interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    children: ReactNode;
+    /** `single` closes the open item when another opens. Default `single`. */
+    type?: AccordionType;
+    /** Open item value(s) — a string for `single`, an array for `multiple`. */
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onValueChange?: (value: string | string[]) => void;
+    /** Allow closing the open item in `single` mode. Default `true`. */
+    collapsible?: boolean;
+    /**
+     * Heading level for each item's trigger. Default `3`.
+     *
+     * Each trigger is wrapped in a real heading, per the APG, so the accordion appears in
+     * the document outline and a screen reader can jump between sections by heading. The
+     * right level depends on what surrounds it, which only the caller knows.
+     */
+    headingLevel?: 2 | 3 | 4;
+}
+/**
+ * Accordion. Matches Figma's `Accordion` / `Accordion Item` (`State: Closed | Open`).
+ *
+ * Width is deliberately not set — Figma's own note on `Accordion Item` says the 640px in
+ * the component set is a container artefact and the parent should own width, so this is
+ * `w-full` and nothing more.
+ */
+declare function Accordion({ children, type, value: valueProp, defaultValue, onValueChange, collapsible, headingLevel, className, ...rest }: AccordionProps): react.JSX.Element;
+interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    value: string;
+    disabled?: boolean;
+}
+declare function AccordionItem({ children, value, disabled, className, ...rest }: AccordionItemProps): react.JSX.Element;
+interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children: ReactNode;
+    /** Hide the chevron — for a trigger that supplies its own affordance. */
+    hideIndicator?: boolean;
+}
+declare function AccordionTrigger({ children, hideIndicator, className, ...rest }: AccordionTriggerProps): react.JSX.Element;
+interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+}
+declare function AccordionContent({ children, className, ...rest }: AccordionContentProps): react.JSX.Element | null;
+
+interface CollapsibleProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+}
+/**
+ * A show/hide region with a trigger. The single-item primitive behind `Accordion`.
+ *
+ * The whole point is the wiring, which is easy to get wrong by hand: the trigger needs
+ * `aria-expanded` and `aria-controls`, the panel needs an id and a matching
+ * `aria-labelledby`, and the panel must be genuinely removed from the accessibility tree
+ * when closed — `height: 0` with `overflow: hidden` leaves its content focusable and
+ * announceable, so a keyboard user tabs into a collapsed section.
+ */
+declare function Collapsible({ children, open: openProp, defaultOpen, onOpenChange, disabled, className, ...rest }: CollapsibleProps): react.JSX.Element;
+interface CollapsibleTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    children?: ReactNode;
+    asChild?: boolean;
+}
+declare function CollapsibleTrigger({ children, asChild, className, ...rest }: CollapsibleTriggerProps): react.JSX.Element;
+interface CollapsibleContentProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /**
+     * Keep the content mounted while closed, hidden with `hidden`. Default `false`.
+     *
+     * `hidden` — not `height: 0` — is what keeps hidden content out of the tab sequence and
+     * the accessibility tree, so this stays safe. Use it to preserve form state or scroll
+     * position across collapses.
+     */
+    keepMounted?: boolean;
+}
+declare function CollapsibleContent({ children, keepMounted, className, ...rest }: CollapsibleContentProps): react.JSX.Element | null;
+
+interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    /** Width ÷ height. `16 / 9` for video, `1` for a square, `4 / 3` for a photo. Default `1`. */
+    ratio?: number;
+}
+/**
+ * Holds a fixed width-to-height ratio for its content.
+ *
+ * Uses the CSS `aspect-ratio` property rather than the old padding-top percentage hack, so
+ * the child is a normal in-flow element instead of being absolutely positioned inside a
+ * zero-height box. The ratio is an inline style because it is a per-instance numeric value —
+ * a Tailwind class cannot express `16 / 9` without an arbitrary-value escape at every call
+ * site.
+ */
+declare const AspectRatio: react.ForwardRefExoticComponent<AspectRatioProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Styled native scrollbars, for the components that must own their own overflow and so
+ * cannot delegate to `ScrollArea`.
+ *
+ * Two kinds qualify. A table wrapper, a tab strip or a stepper, where inserting another
+ * element would break the layout or the `<table>` element relationship; and a floating panel
+ * that is already its own scroll container. Both hold focusable children, so a keyboard user
+ * can already reach and scroll them — which is the one thing `ScrollArea` adds beyond these
+ * classes, and the one thing they do not need.
+ *
+ * Prefer `ScrollArea` for a scrolling *region* of content. Reach for this only when a wrapper
+ * element is not an option, and say why at the call site.
+ *
+ * A plain string module rather than an export from `scroll-area.tsx`: `menu-styles.ts` needs
+ * it, and importing a component module from a style module would pull the component into the
+ * bundle graph for the sake of a class list.
+ */
+declare const SCROLLBAR_CLASSES: string;
+
+type ScrollAreaAxis = 'vertical' | 'horizontal' | 'both';
+interface ScrollAreaProps extends HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    axis?: ScrollAreaAxis;
     /**
-     * Surface tint. This is a prop rather than a `className` because a tone has to
-     * un-set the base `border-default bg-default` pair, not add to it.
+     * Accessible name for the scrollable region. Strongly recommended — a scroll container
+     * that becomes focusable (see below) needs to announce what it is.
      */
-    tone?: CardTone;
+    label?: string;
 }
+
 /**
- * The card shell. Composed from `CardHeader`, `CardBody` and `CardFooter` — or from
- * nothing at all, if you want content to bleed to the edges (drop `CardBody` and put
- * a `DataTable` straight inside).
- *
- * Replaces `SectionCard` and the two monolithic cards that shipped beside it,
- * `AlertCard` and `BenchmarkCard`. Both of those are now documented compositions; see
- * the Cards page. The vocabulary follows shadcn/ui so it is already familiar, with
- * `CardBody` in place of its `CardContent`.
+ * A scrollable region with styled scrollbars.
+ *
+ * **Native scrolling, deliberately.** shadcn/Radix replaces the scrollbar with a rendered
+ * one, which looks tidier and costs real accessibility: an overlay scrollbar has to
+ * reimplement keyboard scrolling, momentum, trackpad and pen behaviour, and the OS
+ * "click the track to page" convention — and it drops out entirely if the JS fails. Styling
+ * `::-webkit-scrollbar` plus `scrollbar-width`/`scrollbar-color` gets most of the look with
+ * none of that risk, and degrades to a normal scrollbar where unsupported.
+ *
+ * The one thing this *does* add is the piece browsers get wrong: a scroll container is not
+ * keyboard focusable by default in Chrome or Safari, so a keyboard-only user cannot scroll
+ * an overflowing `<div>` at all unless something inside it is focusable. This measures its
+ * own content and sets `tabIndex={0}` only while it actually overflows, so the region is
+ * scrollable with the arrow keys without adding a pointless tab stop when it does not.
  */
-declare function Card({ children, radius, tone, className, ...rest }: CardProps): react.JSX.Element;
-interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+declare const ScrollArea: react.ForwardRefExoticComponent<ScrollAreaProps & react.RefAttributes<HTMLDivElement>>;
+
+interface CarouselProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    size?: CardSize;
-    /** Bottom rule separating the header from the body. */
-    divider?: boolean;
+    /** Names the carousel region. Required — a nameless region is not navigable. */
+    label: string;
+    index?: number;
+    defaultIndex?: number;
+    onIndexChange?: (index: number) => void;
+    /** Number of slides. Needed up front for the controls; `CarouselSlide` count is checked against it. */
+    count: number;
+    loop?: boolean;
+    /** Advance every N ms. Omit for a manual carousel. */
+    autoplayInterval?: number;
 }
 /**
- * Header row. Holds `CardTitle`, `CardDescription` and an optional `CardAction`.
- *
- * The `has-[…]` selector switches to a two-column grid only when a `CardAction` is
- * present, which is what lets title, description and action share a header with no
- * wrapper div and no stray gap when the action is absent.
+ * A slide carousel.
+ *
+ * Carousels are one of the most reliably inaccessible patterns on the web, so the parts that
+ * look like polish here are the requirements:
+ *
+ * - **`aria-roledescription="carousel"`** on a named region, so it is announced as a carousel
+ *   rather than as an anonymous group of divs.
+ * - **Slides are `role="group"` with `aria-roledescription="slide"` and an
+ *   "N of M" label** — position is otherwise invisible to anyone not seeing the dots.
+ * - **Off-screen slides are `hidden`**, not merely translated out of view. A slide moved with
+ *   `transform` keeps its links in the tab order, so keyboard users tab into content they
+ *   cannot see. This is the single most common carousel bug.
+ * - **Autoplay stops on hover, on focus, and permanently once the user takes control**, and
+ *   there is a visible pause button whenever autoplay is on — required by WCAG 2.2.2 for any
+ *   motion lasting more than five seconds.
+ * - **`prefers-reduced-motion` disables autoplay entirely**, rather than just shortening the
+ *   transition.
  */
-declare function CardHeader({ children, size, divider, className, ...rest }: CardHeaderProps): react.JSX.Element;
-interface CardTitleProps extends HTMLAttributes<HTMLElement> {
+declare function Carousel({ children, label, index: indexProp, defaultIndex, onIndexChange, count, loop, autoplayInterval, className, ...rest }: CarouselProps): react.JSX.Element;
+interface CarouselViewportProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    size?: CardSize;
-    /** Heading level. Defaults to `p`; use h2/h3 where the page has a real hierarchy. */
-    as?: 'h2' | 'h3' | 'h4' | 'p';
 }
-declare function CardTitle({ children, size, as: Tag, className, ...rest }: CardTitleProps): react.JSX.Element;
-interface CardDescriptionProps extends HTMLAttributes<HTMLParagraphElement> {
+declare function CarouselViewport({ children, className, ...rest }: CarouselViewportProps): react.JSX.Element;
+interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
 }
-declare function CardDescription({ children, className, ...rest }: CardDescriptionProps): react.JSX.Element;
-interface CardActionProps extends HTMLAttributes<HTMLDivElement> {
-    children: ReactNode;
+declare function CarouselSlide({ children, className, ...rest }: CarouselSlideProps): react.JSX.Element;
+interface CarouselControlsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Show the dot indicators. Default `true`. */
+    showDots?: boolean;
 }
-/** Right-hand slot in a `CardHeader` — a button, a count, a status badge, a menu. */
-declare function CardAction({ children, className, ...rest }: CardActionProps): react.JSX.Element;
-interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+declare function CarouselControls({ showDots, className, ...rest }: CarouselControlsProps): react.JSX.Element;
+
+type ResizableDirection = 'horizontal' | 'vertical';
+interface ResizableProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    size?: CardSize;
+    direction?: ResizableDirection;
+    /** First pane's size as a percentage. Controlled. */
+    size?: number;
+    defaultSize?: number;
+    onSizeChange?: (size: number) => void;
+    /** Percentage bounds. Defaults `10` and `90`. */
+    min?: number;
+    max?: number;
 }
 /**
- * The content region. A vertical stack by default.
+ * Two resizable panes with a draggable divider.
  *
- * Because this file uses `cn`, `className` genuinely overrides the base — so
- * `className="flex-row items-center"` gives you a row, and
- * `className="grid grid-cols-3"` a grid. That is what makes the `AlertCard` and
- * `BenchmarkCard` rebuilds possible without a `layout` prop.
+ * This is the APG **window splitter** pattern, and the handle is the whole component as far
+ * as accessibility goes. A `<div>` with pointer listeners — the usual implementation — is
+ * completely unusable without a mouse. `ResizableHandle` is therefore a real focusable
+ * control with:
+ *
+ * - `role="separator"` plus `aria-valuenow`/`valuemin`/`valuemax`, so the current split is
+ *   announced as a percentage rather than being invisible;
+ * - `tabIndex={0}` and arrow keys to move it in 1% steps, Shift+arrow in 10%, Home/End to
+ *   the bounds, and Enter to collapse and restore;
+ * - `aria-controls` pointing at the pane it resizes.
+ *
+ * Sizes are percentages, not pixels, so the split survives a container resize — a pixel
+ * split silently becomes wrong the moment the window changes.
  */
-declare function CardBody({ children, size, className, ...rest }: CardBodyProps): react.JSX.Element;
-interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+declare function Resizable({ children, direction, size: sizeProp, defaultSize, onSizeChange, min, max, className, ...rest }: ResizableProps): react.JSX.Element;
+interface ResizablePanelProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
-    size?: CardSize;
-    divider?: boolean;
-    align?: CardFooterAlign;
+    /** `first` is the pane the handle sizes; `second` fills the remainder. */
+    which: 'first' | 'second';
 }
-/** Action row at the foot of a card. Mirrors `ModalFooter` and `Drawer`'s footer. */
-declare function CardFooter({ children, size, divider, align, className, ...rest }: CardFooterProps): react.JSX.Element;
+declare function ResizablePanel({ children, which, className, ...rest }: ResizablePanelProps): react.JSX.Element;
+interface ResizableHandleProps extends HTMLAttributes<HTMLDivElement> {
+    /** Names the splitter. Default `Resize panels`. */
+    label?: string;
+    /** Show the grip dots. Default `true`. */
+    withGrip?: boolean;
+}
+declare function ResizableHandle({ label, withGrip, className, ...rest }: ResizableHandleProps): react.JSX.Element;
 
 /**
  * Two genuinely different heading contexts, which the source markup distinguished:
@@ -729,7 +2073,13 @@ interface PageToolbarProps {
     children: ReactNode;
     /** Allow the row to wrap when the action cluster is wide (entity-detail has seven buttons). */
     wrap?: boolean;
-    /** Bar height and padding. `sm` suits a secondary bar under the main toolbar. */
+    /**
+     * The bar's **own** height and padding. `sm` suits a secondary bar under the main toolbar.
+     *
+     * Not to be confused with `FilterBar.size`, which sets the density of the controls
+     * *inside* the row. Same literals, different subject: a bar sizes itself, a row of
+     * controls sizes its children. `PageToolbar` passes nothing down.
+     */
     size?: PageToolbarSize;
     className?: string;
 }
@@ -749,30 +2099,50 @@ interface FilterBarProps {
     children: ReactNode;
     /** Right-aligned slot for a result count or a secondary action. */
     trailing?: ReactNode;
-    /** Gap between controls. `sm` for a filter row inside a card or drawer. */
+    /**
+     * Row density. Sets the gap between controls **and** the default `size` of the controls
+     * inside — an Input, Select, Combobox, DatePicker or Button that is not given its own
+     * `size` inherits this one. Pass `size` on a child to opt it out.
+     *
+     * `sm` is for a filter row inside a card or drawer: 8px gaps and 24px controls.
+     */
     size?: FilterBarSize;
     className?: string;
 }
 /**
  * Row of search inputs and filter selects above a table.
  *
- * Replaces nine copies of `flex flex-wrap items-center gap-3`. Thin by design — the
- * value is that the spacing is decided once, not that it hides anything.
+ * Replaces nine copies of `flex flex-wrap items-center gap-3`.
+ *
+ * Through 0.4.0 `size` set only the gap, so every caller had to repeat it on each control
+ * and the page documenting this component got it wrong: its `size="sm"` example put a 24px
+ * Input beside a 36px Select. A container with a size prop should mean it, so the size now
+ * reaches the controls through `ControlSizeProvider`.
  */
 declare function FilterBar({ children, trailing, size, className }: FilterBarProps): react.JSX.Element;
 
 type TabsVariant = 'underline' | 'pill';
 type TabsSize = 'sm' | 'md';
+type TabsOrientation = 'horizontal' | 'vertical';
+/**
+ * `automatic` selects as focus moves, which is the APG default and right when panels are
+ * cheap. `manual` requires Enter/Space — use it when switching tab triggers a fetch, so
+ * arrowing across five tabs does not fire five requests.
+ */
+type TabsActivation = 'automatic' | 'manual';
 interface TabItem<K extends string = string> {
     key: K;
     label: string;
     /** Renders a count chip after the label. */
     count?: number;
+    disabled?: boolean;
 }
 interface TabsProps<K extends string = string> {
     items: TabItem<K>[];
-    value: K;
-    onChange: (key: K) => void;
+    /** Controlled selection. Omit and pass `defaultValue` for uncontrolled. */
+    value?: K;
+    defaultValue?: K;
+    onValueChange?: (key: K) => void;
     /**
      * `underline` is the detail-page form (entity detail, reviewer detail, role detail).
      * `pill` is the filter-style form used by the reviewer queue.
@@ -780,31 +2150,113 @@ interface TabsProps<K extends string = string> {
     variant?: TabsVariant;
     /** `md` is the page-level strip; `sm` suits a tab strip inside a card or drawer. */
     size?: TabsSize;
+    orientation?: TabsOrientation;
+    activation?: TabsActivation;
+    /**
+     * Shared prefix for the generated tab and panel ids. Pass the same value to `TabsPanel`
+     * to wire `aria-controls` / `aria-labelledby`. Generated when omitted.
+     */
+    idPrefix?: string;
+    /** Names the tab strip. Required by the APG when there is more than one on a page. */
+    label?: string;
     className?: string;
 }
+declare const tabId: (prefix: string, key: string) => string;
+declare const tabPanelId: (prefix: string, key: string) => string;
 /**
- * State-driven tab strip.
+ * Tab strip.
+ *
+ * Reworked in 0.4.0. It previously carried `role="tablist"`, `role="tab"` and
+ * `aria-selected` with **no `onKeyDown` at all** — no Arrow keys, no Home/End, no roving
+ * tabindex, no `aria-controls`, and no `role="tabpanel"` counterpart anywhere in the
+ * library. That combination is worse than shipping no ARIA: a screen reader announces
+ * "tab 3 of 5", the user presses the arrow keys it implies, and nothing happens. Every
+ * tab was also individually tabbable, so Tab walked the strip instead of leaving it.
  *
  * The `underline` active colour is `background-brand` (#0C2D58), which is what Figma
- * specifies. Two of the source copies also set `style={{ borderColor: '#0c2d58' }}`
- * redundantly next to the same Tailwind class — dropped here.
+ * specifies.
+ */
+declare function Tabs<K extends string = string>({ items, value: valueProp, defaultValue, onValueChange, variant, size, orientation, activation, idPrefix, label, className, }: TabsProps<K>): react.JSX.Element;
+interface TabsPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** The `key` of the tab this panel belongs to. */
+    tabKey: string;
+    /** Must match the `idPrefix` given to `Tabs`. */
+    idPrefix: string;
+    /** Whether this panel's tab is the selected one. */
+    active: boolean;
+    children: ReactNode;
+    /**
+     * Keep the panel mounted while hidden. Default `false`. Mounting all panels preserves
+     * scroll position and form state across tab switches at the cost of rendering them all.
+     */
+    keepMounted?: boolean;
+}
+/**
+ * The `role="tabpanel"` half of the pattern, which the library had no equivalent of —
+ * so `aria-controls` on a tab pointed at nothing and there was no labelled region for a
+ * screen reader to move into.
+ *
+ * `tabIndex={0}` is deliberate and required: when a panel contains no focusable element,
+ * it must be reachable itself, otherwise Tab from the selected tab skips the content
+ * entirely.
  */
-declare function Tabs<K extends string = string>({ items, value, onChange, variant, size, className, }: TabsProps<K>): react.JSX.Element;
+declare function TabsPanel({ tabKey, idPrefix, active, children, keepMounted, className, ...rest }: TabsPanelProps): react.JSX.Element | null;
 
 type NavItemSize = 'sm' | 'md';
-interface NavItemProps {
+type NavItemVariant = 'card' | 'plain';
+interface NavItemProps extends Omit<HTMLAttributes<HTMLElement>, 'children'> {
+    /**
+     * Leading glyph. Optional, but when `collapsed` it is the only thing left to look at, so
+     * a row without one falls back to a monogram taken from the label.
+     */
     icon?: ReactNode;
     label: string;
+    /**
+     * The row you are on — the current route. Paints the brand fill and, under `asChild`, sets
+     * `aria-current="page"`; it also reflects to `data-state="active"`.
+     *
+     * Not the same thing as focus, though Figma's `MenuButton` names this variant
+     * `state=focussed`. That is a misnomer to fix on the design side: keyboard focus is the
+     * ring below, it is transient and can land on any row, and if it painted the brand fill
+     * too there would be no way to see which row is the current one while tabbing past it.
+     */
     isActive?: boolean;
     /** Red indicator dot at top-right corner (e.g. unread count) */
     indicator?: boolean;
-    /** Collapsed mode — icon only, label hidden */
+    /** Collapsed mode — label is visually hidden but stays in the accessibility tree. */
     collapsed?: boolean;
     /** Row height. `sm` suits a dense secondary nav or a nested group. */
     size?: NavItemSize;
+    /**
+     * Row weight.
+     *
+     * `card` gives every inactive row its own border and surface — right for a short primary
+     * rail of eight or ten destinations, where each row is a target in its own right.
+     * `plain` drops both, so an inactive row is just text: right for a long grouped nav,
+     * where thirty bordered pills read as thirty cards rather than a list.
+     *
+     * A variant decides what a row looks like **at rest, and nothing else**. Hover and the
+     * current-row fill are one vocabulary shared by both — see `STATE`. Through 0.5.0 each
+     * variant defined its own, and `plain`'s was invisible against the rail it was written for.
+     */
+    variant?: NavItemVariant;
+    /**
+     * Render the single child element as the row, so the row itself is the link or button.
+     *
+     * `NavItem` is presentational by default — a `<span>` with hover styling. That is fine
+     * inside a router `NavLink`, which is how `src/sidebar/` uses it, but on its own it is a
+     * nav row that looks interactive and cannot be focused or activated. `asChild` is the
+     * fix for anyone using it outside that wrapper:
+     *
+     *     <NavItem asChild icon={<LuHouse />} label="Home">
+     *       <NavLink to="/" />
+     *     </NavItem>
+     */
+    asChild?: boolean;
+    children?: ReactNode;
     className?: string;
 }
-declare function NavItem({ icon, label, isActive, indicator, collapsed, size, className, }: NavItemProps): react.JSX.Element;
+declare function NavItem({ icon, label, isActive, indicator, collapsed, size, variant, asChild, children, className, ...rest }: NavItemProps): react.JSX.Element;
 
 type EyebrowLabelVariant = 'uppercase' | 'plain';
 interface EyebrowLabelProps {
@@ -831,6 +2283,265 @@ interface EyebrowLabelProps {
  */
 declare function EyebrowLabel({ children, variant, className }: EyebrowLabelProps): react.JSX.Element;
 
+type SeparatorOrientation = 'horizontal' | 'vertical';
+interface SeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    orientation?: SeparatorOrientation;
+    /**
+     * `true` when the rule is purely visual, which is the common case. A decorative
+     * separator is `role="none"` and stays out of the accessibility tree; a semantic one
+     * is `role="separator"` and announces a break between groups.
+     */
+    decorative?: boolean;
+}
+/**
+ * A hairline rule. Matches Figma's `Menu Separator`, generalised to both orientations.
+ *
+ * Drawn as a filled element rather than a border, because a 1px border on a flex child
+ * collapses to nothing at some zoom levels while a `1px` height does not — which is why
+ * the preset carries a `divider` background token separate from `border-default`.
+ */
+declare const Separator: react.ForwardRefExoticComponent<SeparatorProps & react.RefAttributes<HTMLDivElement>>;
+
+type KbdSize = 'sm' | 'md';
+interface KbdProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    size?: KbdSize;
+}
+/**
+ * A keyboard key. Matches Figma's `Menu Shortcut`.
+ *
+ * Renders a real `<kbd>` so assistive tech announces it as key input rather than as a
+ * stray glyph — `⌘K` read as plain text is "place of interest sign K".
+ *
+ * Pass one key per element and let the caller supply the joiner, so a shortcut reads as
+ * separate keys instead of one run-together string:
+ *
+ *     <Kbd>⌘</Kbd><Kbd>K</Kbd>
+ */
+declare const Kbd: react.ForwardRefExoticComponent<KbdProps & react.RefAttributes<HTMLElement>>;
+
+interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    /** Names the landmark. Default `Breadcrumb`. */
+    label?: string;
+}
+/**
+ * Breadcrumb trail.
+ *
+ * A `<nav>` wrapping an ordered list, which is the whole semantic point: the order *is* the
+ * hierarchy, so `<ol>` says something `<div>` cannot, and the landmark lets a screen reader
+ * user jump to the trail without walking the header.
+ *
+ * The separators are `aria-hidden` and generated by the list, not passed in — a chevron
+ * announced between every crumb is noise, and the `/` characters people usually hand-type
+ * get read out one by one.
+ */
+declare const Breadcrumb: react.ForwardRefExoticComponent<BreadcrumbProps & react.RefAttributes<HTMLElement>>;
+interface BreadcrumbItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    /**
+     * The page you are on. Renders as plain text with `aria-current="page"` rather than a
+     * link — a link to the current page is a dead control, and the APG says the last crumb
+     * should not be one.
+     */
+    current?: boolean;
+    /** Render a router `Link` instead of an `<a>`. */
+    asChild?: boolean;
+    /** Suppress the leading separator. Set automatically on the first item you render. */
+    first?: boolean;
+}
+declare const BreadcrumbItem: react.ForwardRefExoticComponent<BreadcrumbItemProps & react.RefAttributes<HTMLAnchorElement>>;
+interface BreadcrumbEllipsisProps extends HTMLAttributes<HTMLSpanElement> {
+}
+/**
+ * Stands in for collapsed middle crumbs on a deep trail.
+ *
+ * A `<span>`, not a button: it is a truncation marker, and making it a disabled control
+ * puts an unusable stop in the tab order. If the hidden crumbs need to be reachable, wrap
+ * this in a `DropdownMenuTrigger` and list them.
+ */
+declare const BreadcrumbEllipsis: react.ForwardRefExoticComponent<BreadcrumbEllipsisProps & react.RefAttributes<HTMLSpanElement>>;
+
+type PaginationType = 'default' | 'dots';
+interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** 1-based. */
+    page: number;
+    /** Total number of pages. Values below 1 render nothing. */
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    /** Matches Figma's `Type` axis. `dots` is the compact carousel form. */
+    type?: PaginationType;
+    /** How many numbered pages to show either side of the current one. Default `1`. */
+    siblingCount?: number;
+    /** Names the nav landmark. Default `Pagination`. */
+    label?: string;
+}
+declare const GAP = "\u2026";
+/**
+ * Builds the visible page list with ellipses.
+ *
+ * Always returns first and last, the current page, and `siblingCount` either side. The
+ * window is widened rather than allowed to shrink near the ends, so the control does not
+ * change width as the user pages through — a row of buttons that reflows under the cursor
+ * is how you mis-click.
+ */
+declare function paginationRange(page: number, pageCount: number, siblingCount?: number): (number | typeof GAP)[];
+/**
+ * Pagination. Matches Figma's `Pagination` (`Type: Default | Dots`), `Pagination Page`
+ * (`State: Default | Hover | Current | Current Hover`), `Pagination Next` / `Previous`
+ * (`Default | Hover | Disabled`) and `Pagination dots` (`Active | Inactive`).
+ *
+ * `DataTable` had no pager at all, so every consumer built one. Notes on the semantics:
+ *
+ * - A `<nav>` landmark with a name, so it is reachable by landmark navigation.
+ * - `aria-current="page"` on the active page. It is the only non-visual signal of which
+ *   page you are on; the filled background is not announced.
+ * - Each page button is named "Page 3", not "3" — a bare number read out of context tells
+ *   a screen reader user nothing about what activating it does.
+ * - The ellipsis is inert text, not a disabled button, so it is skipped rather than
+ *   announced as an unavailable control.
+ */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+type NavigationMenuOrientation = 'horizontal' | 'vertical';
+type NavigationMenuVariant = 'pill' | 'link';
+interface NavigationMenuProps extends HTMLAttributes<HTMLElement> {
+    children: ReactNode;
+    orientation?: NavigationMenuOrientation;
+    /** Names the nav landmark. Required when a page has more than one `<nav>`. */
+    label: string;
+}
+/**
+ * A navigation landmark wrapping a list of links. Matches Figma's `Navigation Pill List`
+ * and `Navigation Button List`.
+ *
+ * Why the `<nav>` + `<ul>` + `<li>` nesting rather than a flat row of anchors: the list is
+ * what makes a screen reader announce "list, 5 items" and lets the user jump the whole
+ * block. A bare row of links is announced one at a time with no sense of how many there
+ * are or where the set ends. The `label` is required for the same reason — an unnamed
+ * landmark in a page with a sidebar *and* a top bar is not navigable.
+ */
+declare const NavigationMenu: react.ForwardRefExoticComponent<NavigationMenuProps & react.RefAttributes<HTMLElement>>;
+interface NavigationMenuItemProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children: ReactNode;
+    /** Matches Figma's `State: Active`. Sets `aria-current="page"`. */
+    active?: boolean;
+    variant?: NavigationMenuVariant;
+    /** Render a router `Link` instead of an `<a>`. */
+    asChild?: boolean;
+    /** Leading glyph. Marked decorative automatically. */
+    icon?: ReactNode;
+}
+/**
+ * A single navigation link. Matches Figma's `Navigation Pill` and `Navigation Button`
+ * (`State: Default | Active | Hover`).
+ *
+ * `aria-current="page"` is the point: the filled pill is not announced, so without it a
+ * screen reader user cannot tell which page they are on.
+ */
+declare const NavigationMenuItem: react.ForwardRefExoticComponent<NavigationMenuItemProps & react.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * The type ramp as components, mirroring Figma's `Text*` primitives one-for-one:
+ * `Text`, `Text Strong`, `Text Emphasis`, `Text Small`, `Text Code`, `Text Link`,
+ * `Text Heading`, `Text Subheading`, `Text Subtitle`, `Text Title Page`,
+ * `Text Title Hero`, `Text List`, `Text List Item`, `Text Link List`.
+ *
+ * These existed in Figma with settled styles and had no code counterpart, so every
+ * consumer reached for a raw `text-body-sm text-default` triplet and the ramp drifted.
+ * Each component pins the size/weight/colour combination and nothing else, so layout
+ * stays the caller's job.
+ *
+ * All of them take `asChild`, because the right element is contextual — a `Heading` is an
+ * `<h2>` on a page and an `<h3>` inside a card, and only the caller knows the outline.
+ */
+type BaseProps = HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+};
+type TextProps = BaseProps;
+/** `Text` — the default body paragraph. */
+declare const Text: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Small` — secondary body copy. */
+declare const TextSmall: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Tiny` — the smallest readable step; captions and table meta. */
+declare const TextTiny: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Strong` — emphasis by weight, in a real `<strong>`. */
+declare const TextStrong: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Emphasis` — emphasis by slant, in a real `<em>`. */
+declare const TextEmphasis: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Code` — inline monospace. */
+declare const TextCode: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Title Hero` — the largest step, one per page at most. */
+declare const TitleHero: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Title Page` — page title. */
+declare const TitlePage: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Subtitle` — a lead paragraph under a title; regular weight by design. */
+declare const Subtitle: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Heading` — section heading. */
+declare const Heading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+/** `Text Subheading` — subsection heading; regular weight, matching Figma. */
+declare const Subheading: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & {
+    children?: ReactNode;
+    asChild?: boolean;
+} & react.RefAttributes<HTMLElement>>;
+interface TextLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+    children?: ReactNode;
+    asChild?: boolean;
+}
+/**
+ * `Text Link`. Underlined rather than colour-only: colour alone is not a sufficient
+ * distinction for a link inside a run of text (WCAG 1.4.1).
+ */
+declare const TextLink: react.ForwardRefExoticComponent<TextLinkProps & react.RefAttributes<HTMLAnchorElement>>;
+type TextListVariant = 'bulleted' | 'numbered' | 'plain';
+type TextListDensity = 'default' | 'compact';
+interface TextListProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    variant?: TextListVariant;
+    /** Matches Figma's `Density` axis on `Text List` / `Text Link List`. */
+    density?: TextListDensity;
+}
+/** `Text List` — a real `<ul>`/`<ol>`, so item count is announced. */
+declare const TextList: react.ForwardRefExoticComponent<TextListProps & react.RefAttributes<HTMLElement>>;
+type TextListItemProps = HTMLAttributes<HTMLLIElement> & {
+    children?: ReactNode;
+};
+/** `Text List Item`. */
+declare const TextListItem: react.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
+    children?: ReactNode;
+} & react.RefAttributes<HTMLLIElement>>;
+
 type WidgetTitleSize = 'sm' | 'md' | 'lg';
 interface WidgetTitleProps {
     children: ReactNode;
@@ -1129,6 +2840,15 @@ interface SparklineProps {
     strokeWidth?: number;
     /** Dot on the final point — useful when the line is the "current value". */
     showEndDot?: boolean;
+    /**
+     * Stretch to fill the container instead of drawing at a fixed pixel size.
+     *
+     * The `size` preset still sets the viewBox, so it decides the sampling density; the SVG then
+     * scales to the box it is given. Stroke width is held constant with `non-scaling-stroke`,
+     * without which a non-uniform stretch would thin the line on one axis and thicken it on the
+     * other.
+     */
+    fill?: boolean;
     /** Accessible description. Omit to keep the chart decorative. */
     label?: string;
     className?: string;
@@ -1140,7 +2860,7 @@ interface SparklineProps {
  * draw, which is what makes a sparkline readable at `lg` where a bare 1.5px stroke
  * looks thin.
  */
-declare function Sparkline({ data, variant, tone, color, size, width, height, strokeWidth, showEndDot, label, className, }: SparklineProps): react.JSX.Element | null;
+declare function Sparkline({ data, variant, tone, color, size, width, height, strokeWidth, showEndDot, fill: stretch, label, className, }: SparklineProps): react.JSX.Element | null;
 
 type MiniBarChartSize = 'sm' | 'md' | 'lg';
 type MiniBarChartOrientation = 'vertical' | 'horizontal';
@@ -1165,11 +2885,20 @@ interface MiniBarChartProps {
     gap?: number;
     orientation?: MiniBarChartOrientation;
     radius?: number;
+    /**
+     * Stretch to fill the container instead of drawing at a fixed pixel size.
+     *
+     * The `size` preset still sets the viewBox, so it decides the bar-to-gap proportions; the
+     * SVG then scales to whatever box it is given. Without this a widget body could only hold a
+     * chart at a hardcoded width, which stops being the right width as soon as the widget
+     * reflows.
+     */
+    fill?: boolean;
     label?: string;
     className?: string;
 }
 /** A compact bar series with no axes — a distribution or a per-period count. */
-declare function MiniBarChart({ bars, tone, color, restColor, highlight, size, width, height, gap, orientation, radius, label, className, }: MiniBarChartProps): react.JSX.Element | null;
+declare function MiniBarChart({ bars, tone, color, restColor, highlight, size, width, height, gap, orientation, radius, fill: stretch, label, className, }: MiniBarChartProps): react.JSX.Element | null;
 
 type LegendDotSize = 'sm' | 'md';
 /** `line` is the swatch for a line series; `dot` and `square` for areas and bars. */
@@ -1257,6 +2986,11 @@ interface ListRowProps {
     /** Render an `<li>` instead of a `<div>` — use inside a `<ul>`/`<ol>`. */
     as?: 'div' | 'li';
     onClick?: () => void;
+    /**
+     * Accessible name for a clickable row. Strongly recommended whenever `onClick` is set:
+     * without it the name is the concatenation of every slot's text.
+     */
+    'aria-label'?: string;
     className?: string;
 }
 /**
@@ -1267,7 +3001,7 @@ interface ListRowProps {
  * unicode-glyph labels — into the library. Every feature of those rows is reachable by
  * composing this with `FileRow`, `FileDropZone` and `StatusBadge`; see the docs.
  */
-declare function ListRow({ leading, title, titleMeta, description, meta, trailing, footer, density, divider, as: Tag, onClick, className, }: ListRowProps): react.JSX.Element;
+declare function ListRow({ leading, title, titleMeta, description, meta, trailing, footer, density, divider, as: Tag, onClick, 'aria-label': ariaLabel, className, }: ListRowProps): react.JSX.Element;
 
 interface FileRowProps {
     name: string;
@@ -1359,27 +3093,39 @@ interface ProgressBarProps {
  */
 declare function ProgressBar({ value, tone, size, label, showValue, radius, 'aria-label': ariaLabel, className, }: ProgressBarProps): react.JSX.Element;
 
-interface RankedRowProps {
-    rank?: number;
-    name: string;
-    sublabel?: string;
+interface NumberedListItem {
+    title: string;
+    /** Second line under the title — a region, a category, an id. */
+    subtitle?: string;
     score: number;
-    /** Bar and value colour. `auto` derives it from `score`. */
+    /** Bar and value colour for this row. `auto` derives it from `score`. */
     tone?: ProgressBarTone | 'auto';
-    /** Which end of the scale is bad, when `tone` is `auto`. */
+}
+type NumberedListGap = 'sm' | 'md';
+interface NumberedListProps {
+    items: NumberedListItem[];
+    /** Which end of the scale is bad, for rows resolving `tone` automatically. */
     direction?: ScoreDirection;
     scoreSize?: ScoreValueSize;
     scoreWeight?: ScoreValueWeight;
+    /** First ordinal. Set it to continue a list across a page boundary. */
+    startAt?: number;
+    gap?: NumberedListGap;
     className?: string;
 }
 /**
- * A leaderboard row: rank, name, score, and a full-width bar underneath.
+ * A ranked leaderboard: ordinal, title, score, and a full-width bar under each row.
  *
- * Was `RankedListItem` — the only `…Item` in a folder of `…Row`s. Its three raw-hex
- * colour props (`scoreColor`, `barColor`, `barTrackColor`) are gone in favour of
- * `tone`, and its `gap` CSS string is now the `gap-1.5` it always resolved to.
+ * Was `RankedRow`, which was one row and made the caller supply both the `<ol>` and every
+ * `rank` by hand — so a filtered or re-sorted list silently kept stale numbers. Owning the
+ * list means the ordinal is derived from position and cannot disagree with the order on
+ * screen. It also puts it at the same granularity as `StepsList`, its neighbour.
+ *
+ * It still hardcodes `ProgressBar` and `ScoreValue`, and that is the point: a leaderboard
+ * row *is* those three things. Where the pieces need to vary, reach for `ScoredRow`, whose
+ * slots take arbitrary content.
  */
-declare function RankedRow({ rank, name, sublabel, score, tone, direction, scoreSize, scoreWeight, className, }: RankedRowProps): react.JSX.Element;
+declare function NumberedList({ items, direction, scoreSize, scoreWeight, startAt, gap, className, }: NumberedListProps): react.JSX.Element;
 
 interface IconTextRowProps {
     icon: ReactNode;
@@ -1414,58 +3160,76 @@ interface ChecklistRowProps {
  */
 declare function ChecklistRow({ label, state, className }: ChecklistRowProps): react.JSX.Element;
 
-interface NumberedStepsListProps {
+interface StepsListProps {
     steps: ReactNode[];
     className?: string;
 }
 /**
- * Ordered list with small filled number bullets.
+ * Ordered list of instructions with small filled number bullets.
  *
- * Promoted from entity-detail's "what happens next" panel. The panel's copy is
- * review-lifecycle business content and stays there; only the list chrome moves.
+ * Was `NumberedStepsList`. Renamed in 0.5.0 because `NumberedList` — the ranked
+ * leaderboard — also numbers its rows, and two components whose names both led with
+ * "Numbered" gave no hint which was which. The distinction is what the numbers *mean*:
+ * here they are sequence ("do this, then this"), there they are rank.
  *
  * The bullet was `bg-[#e7edfb] text-[#1d4ed8]` — a pale blue pair that is not in the
  * token set. It now uses the brand-tertiary background and brand text, which is the
  * documented treatment for a subtle brand-tinted chip.
  */
-declare function NumberedStepsList({ steps, className }: NumberedStepsListProps): react.JSX.Element;
+declare function StepsList({ steps, className }: StepsListProps): react.JSX.Element;
 
-type MetaFieldLayout = 'stacked' | 'inline';
-interface MetaFieldProps {
+type DetailItemLayout = 'stacked' | 'inline';
+type DetailItemSpan = 1 | 2 | 'full';
+interface DetailItemProps {
     label: string;
     value: ReactNode;
-    /** Optional second line under the value (used by the onboarding review sections). */
+    /** Optional second line under the value. */
     detail?: ReactNode;
     /**
-     * `stacked` puts the label above the value (detail pages, onboarding review).
+     * `stacked` puts the label above the value (detail pages, review summaries).
      * `inline` puts a fixed-width label beside it (drawer detail rows).
      */
-    layout?: MetaFieldLayout;
-    /** Fixed width for the `stacked` form, e.g. `sm:w-[262px]` on the overview grid. */
+    layout?: DetailItemLayout;
+    /**
+     * Columns to occupy inside a `DetailGrid`. `full` spans the row — for a long value
+     * such as an alias list or a legal name that would otherwise truncate.
+     */
+    span?: DetailItemSpan;
+    /**
+     * Label column width for the `inline` layout. A `min-w`/`max-w` pair rather than a
+     * fixed `w-`, so a long label wraps instead of colliding with the value.
+     */
+    labelWidth?: string;
     className?: string;
 }
 /**
  * A label/value pair.
  *
- * Consolidates the same shape from six places: the entity-detail overview grid, the
- * reviewer-detail metric column, three `DetailRow` copies in drawers (queues,
- * filings, website-intel) and `ReviewMeta` in both onboarding wizards.
+ * Was `MetaField` — an internal codename that said nothing about the shape. Consolidates
+ * the same pair from six places: an entity-detail overview grid, a reviewer-detail metric
+ * column, three `DetailRow` copies in drawers, and `ReviewMeta` in two onboarding wizards.
  *
- * An empty value renders an em dash, which is what every source copy did by hand.
+ * An empty value renders an em dash, which is what every source copy did by hand. Note
+ * that the check is for `null`/`undefined`/`''` only — `0` and `false` are real values and
+ * render as themselves.
  */
-declare function MetaField({ label, value, detail, layout, className, }: MetaFieldProps): react.JSX.Element;
-interface MetaFieldGridProps {
+declare function DetailItem({ label, value, detail, layout, span, labelWidth, className, }: DetailItemProps): react.JSX.Element;
+type DetailGridColumns = 2 | 3 | 4 | 'auto';
+interface DetailGridProps {
     children: ReactNode;
+    columns?: DetailGridColumns;
     className?: string;
 }
 /**
- * Wrapper for a set of `MetaField`s that wrap into columns.
+ * Wrapper for a set of `DetailItem`s.
  *
- * Matches the entity-detail overview grid, which relies on each field carrying its
- * own width rather than on fixed grid columns — long values (aliases, legal names)
- * need to be able to occupy a full row on narrow viewports.
+ * A real grid, not the `flex flex-wrap` it was as `MetaFieldGrid`. Under flex-wrap every
+ * item had to carry its own width (`sm:w-[262px]` was the documented idiom) and whatever
+ * space was left over at the end of a row stayed empty — so a three-item row in a wide
+ * card had a ragged gap on the right. `1fr` tracks divide the row exactly, and an item
+ * that genuinely needs more room asks for it with `span` instead of a magic width.
  */
-declare function MetaFieldGrid({ children, className }: MetaFieldGridProps): react.JSX.Element;
+declare function DetailGrid({ children, columns, className }: DetailGridProps): react.JSX.Element;
 
 type CheckedGroupListColumns = 1 | 2 | 3;
 /** One labelled group of ticked items. */
@@ -1494,6 +3258,68 @@ interface CheckedGroupListProps {
  */
 declare function CheckedGroupList({ groups, columns, icon, emptyLabel, className, }: CheckedGroupListProps): react.JSX.Element;
 
+type TableDensity = 'default' | 'compact';
+type TableSortDirection = 'ascending' | 'descending';
+/**
+ * The composable table primitive, matching Figma's `Table` and `Table cell`.
+ *
+ * `DataTable` is the config-driven form — you give it `columns` and `rows` and it renders
+ * everything. It is the right tool most of the time, and it is not going away. But it
+ * cannot express a grouped header, a footer row, a colspan, or a cell layout outside its
+ * `render` signature, so anything unusual meant abandoning it for a hand-rolled `<table>`
+ * with none of the semantics. These parts are that escape hatch with the semantics kept.
+ *
+ * Figma's `Table cell` has a 32-value `Style` axis (lead checkbox, lead avatar, badges
+ * multiple, trend positive/negative, action icons, star ratings, payment method…). Those
+ * are *compositions*, not variants of one component — each is an existing library
+ * component dropped into a cell — so they are expressed here as `TableCell` plus whatever
+ * goes inside it, rather than 32 props.
+ */
+interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Names the table. Required unless you render a `TableCaption`. */
+    label?: string;
+    density?: TableDensity;
+    /** Equal-width columns driven by `<colgroup>`, matching `DataTable`. Default `false`. */
+    fixed?: boolean;
+}
+declare const Table: react.ForwardRefExoticComponent<TableProps & react.RefAttributes<HTMLTableElement>>;
+interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+}
+/**
+ * A visible table title that also names the table. Prefer this over `label` when the
+ * heading is on screen anyway — `DataTable` could not be named at all before 0.4.0.
+ */
+declare const TableCaption: react.ForwardRefExoticComponent<TableCaptionProps & react.RefAttributes<HTMLTableCaptionElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    selected?: boolean;
+}
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /**
+     * Makes the header a sort control. `false` means sortable but not currently sorted.
+     *
+     * `aria-sort` goes on the `<th>` and must be present on exactly one column at a time —
+     * it is the only non-visual signal of sort state, and `DataTable` had none.
+     */
+    sort?: TableSortDirection | false;
+    onSort?: () => void;
+    align?: 'left' | 'center' | 'right';
+    /** Keeps the header visible while the body scrolls. */
+    sticky?: boolean;
+}
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    align?: 'left' | 'center' | 'right';
+    /** Vertical rhythm. Matches `DataTable`'s `density`. */
+    density?: TableDensity;
+    /** Makes this the row's header cell — `scope="row"`, for a table with row headers. */
+    header?: boolean;
+}
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLTableCellElement>>;
+
 interface ColumnDef<T> {
     key: string;
     header: string;
@@ -1624,6 +3450,129 @@ interface EmptyStateProps {
  */
 declare function EmptyState({ message, variant, size, icon, action, className, }: EmptyStateProps): react.JSX.Element;
 
+type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg';
+interface SpinnerProps extends HTMLAttributes<HTMLSpanElement> {
+    size?: SpinnerSize;
+    /**
+     * Accessible name. When omitted the spinner is marked decorative — correct when it sits
+     * inside a control that already announces the pending state (`Button loading` sets
+     * `aria-busy`), and wrong when the spinner is the only thing on screen.
+     */
+    label?: string;
+}
+/**
+ * Indeterminate loading indicator. `ProgressBar` is the determinate counterpart.
+ *
+ * The spin is a border-based ring rather than an SVG so it inherits `currentColor` and
+ * needs no fill/stroke plumbing — it works on any button variant unchanged. The animation
+ * is suppressed under `prefers-reduced-motion` by the preset's base rule, which leaves a
+ * static ring; that is why the transparent segment is a full quarter and still legible
+ * when frozen.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLSpanElement>>;
+
+type SkeletonShape = 'line' | 'block' | 'circle';
+interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    shape?: SkeletonShape;
+    /** Number of stacked lines. Only meaningful for `line`. */
+    lines?: number;
+}
+/**
+ * Loading placeholder.
+ *
+ * `aria-hidden` and no role: a skeleton is a picture of content that does not exist yet,
+ * so announcing it produces a burst of meaningless nodes. The *region* it sits in should
+ * carry the loading state — `EmptyState variant="loading"` or `aria-busy` on the
+ * container — which is a decision only the caller can make.
+ *
+ * The pulse is suppressed by the preset's `prefers-reduced-motion` rule, leaving a plain
+ * tinted block.
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLDivElement>>;
+
+type BannerVariant = 'message' | 'alert';
+interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Bold first line. Matches Figma's `Title`. */
+    title: ReactNode;
+    /** Supporting copy. Matches Figma's `Body`. */
+    children?: ReactNode;
+    /**
+     * Matches Figma's `Variant` axis. `message` is informational; `alert` is urgent and is
+     * announced immediately.
+     */
+    variant?: BannerVariant;
+    tone?: InlineAlertTone;
+    /** Replaces the tone glyph. Pass `null` to suppress it. Matches `Icon` / `Has Icon`. */
+    icon?: ReactNode | null;
+    /** Trailing action slot. Matches `Has Button`. */
+    action?: ReactNode;
+    /** Renders a dismiss button. Matches `Dismissible`. */
+    onDismiss?: () => void;
+}
+/**
+ * A page- or section-level banner with a title, body, optional action and optional dismiss.
+ *
+ * This is Figma's `Notification` set (`Variant: Message | Alert`, with `Title`, `Body`,
+ * `Has Icon`, `Has Button` and `Dismissible`). Worth being precise about the name: its
+ * Figma keywords are "message, alert, feedback, callout, banner" — it is a *persistent,
+ * in-flow* notice, **not** a toast. A toast is transient, stacked, and announced from a
+ * live region that already exists; that is `Toast`, and it is a different component.
+ *
+ * `InlineAlert` remains the compact single-line form for use inside a form or a card.
+ * `Banner` is the one with a heading and an action.
+ *
+ * `variant` drives the announcement, not just the styling: `alert` is `role="alert"`
+ * (interrupts), `message` is `role="status"` (waits its turn).
+ */
+declare const Banner: react.ForwardRefExoticComponent<BannerProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastTone = InlineAlertTone;
+type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+interface ToastOptions {
+    title: ReactNode;
+    description?: ReactNode;
+    tone?: ToastTone;
+    /** Milliseconds before auto-dismiss. `0` keeps it until dismissed. Default `5000`. */
+    duration?: number;
+    action?: ReactNode;
+}
+interface ToastRecord extends ToastOptions {
+    id: string;
+}
+interface ToastContextValue {
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+/**
+ * Queue a toast. Must be called under a `<Toaster>`.
+ *
+ * Returns the toast's id so a long-running action can dismiss its own "Saving…" toast when
+ * it finishes.
+ */
+declare function useToast(): ToastContextValue;
+interface ToasterProps {
+    children: ReactNode;
+    position?: ToasterPosition;
+    /** Maximum simultaneous toasts. Oldest are dropped first. Default `4`. */
+    max?: number;
+    /** Default auto-dismiss for toasts that do not set their own. Default `5000`. */
+    duration?: number;
+}
+/**
+ * Provider plus the region toasts render into. Mount once, near the app root.
+ *
+ * The library had no toast and — more importantly — **no persistent live region at all**,
+ * so nothing could announce an event that happened away from focus. The distinction that
+ * matters here: a live region must already exist in the DOM before content is put into it.
+ * A region that mounts at the same moment as its message is frequently not announced,
+ * which is why the wrapper below renders unconditionally and only its children come and go.
+ *
+ * `aria-live="polite"` on the container, and `role="alert"` on individual `danger` toasts
+ * so a failure interrupts rather than queueing behind a success message.
+ */
+declare function Toaster({ children, position, max, duration, }: ToasterProps): react.JSX.Element;
+
 type PasswordInputProps = Omit<InputProps, 'type' | 'trailingIcon' | 'trailingAction'>;
 /** Password field with a show/hide visibility toggle. */
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
@@ -1660,52 +3609,4 @@ declare function QuickActionsBar({ actions, active, onSelect, className }: Quick
  *  with `relative`. */
 declare function AuroraBackdrop(): react.JSX.Element;
 
-/** Bespoke icon art with no equivalent in the stroked icon set.
- *
- *  The library's icons come from `react-icons/lu`, which is a *stroked* set. What
- *  lives here is the small set of *filled* 20×20 marks: swapping these for
- *  `LuInfo`/`LuArrowRight`/etc. would turn a solid glyph into an outline — a visual
- *  change, not a redraw. They keep their own `viewBox="0 0 20 20"` and
- *  `fill="currentColor"`, and size via `className` (e.g. `className="size-5"`).
- *
- *  Do not add stroked icons here — import them from `react-icons/lu` instead.
- */
-interface SolidIconProps {
-    className?: string;
-}
-declare const SolidAlertTriangle: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidShieldCheck: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidGlobe: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidMapPin: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidClock: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidArrowRight: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidInfoCircle: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-declare const SolidCheck: {
-    ({ className }: SolidIconProps): react.JSX.Element;
-    displayName: string;
-};
-/** Chart bars — the one mark here without a `fillRule`/`clipRule` pair. */
-declare function SolidChartBar({ className }: SolidIconProps): react.JSX.Element;
-
-export { AIChatBar, type AIChatBarProps, AISuggestionChip, type AISuggestionChipProps, AuroraBackdrop, Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, BarChart, type BarChartOrientation, type BarChartProps, type BarChartSeries, type BarChartSize, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_SEQUENCE, CHART_TONE, CHART_TRACK, Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterAlign, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardRadius, type CardSize, CardTitle, type CardTitleProps, type CardTone, ChartLegend, type ChartLegendItem, type ChartLegendOrientation, type ChartLegendProps, type ChartTone, CheckIndicator, type CheckIndicatorProps, type CheckIndicatorStatus, Checkbox, type CheckboxProps, type CheckedGroup, CheckedGroupList, type CheckedGroupListColumns, type CheckedGroupListProps, ChecklistRow, type ChecklistRowProps, type ChecklistRowState, type ColumnDef, ConfirmDialog, type ConfirmDialogProps, CountBadge, type CountBadgeProps, DEFAULT_SCORE_THRESHOLDS, DataTable, type DataTableAlign, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerProps, DonutChart, type DonutChartProps, type DonutChartSize, type DonutSegment, Drawer, type DrawerProps, DropdownMenu, type DropdownMenuItem, type DropdownMenuProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateVariant, EntityIconBadge, type EntityIconBadgeProps, type EntityIconBadgeSize, type EntityIconBadgeTone, EyebrowLabel, type EyebrowLabelProps, type EyebrowLabelVariant, FileDropZone, type FileDropZoneProps, FileRow, type FileRowProps, FilterBar, type FilterBarProps, type FilterBarSize, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, IconButton, type IconButtonProps, type IconButtonVariant, IconTextRow, type IconTextRowProps, InlineAlert, type InlineAlertProps, type InlineAlertTone, Input, type InputProps, type InputSize, LegendDot, type LegendDotProps, type LegendDotShape, type LegendDotSize, ListRow, type ListRowDensity, type ListRowDivider, type ListRowProps, MetaField, MetaFieldGrid, type MetaFieldGridProps, type MetaFieldLayout, type MetaFieldProps, MiniBarChart, type MiniBarChartOrientation, type MiniBarChartProps, type MiniBarChartSize, Modal, ModalBody, type ModalBodyProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterAlign, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, type ModalTone, MultiSelectCard, type MultiSelectCardProps, NavItem, type NavItemProps, type NavItemSize, NoteConfirmModal, type NoteConfirmModalProps, NumberedStepsList, type NumberedStepsListProps, OVERLAY_SCRIM, PageHeading, type PageHeadingProps, type PageHeadingSize, PageToolbar, type PageToolbarProps, type PageToolbarSize, PasswordInput, type PasswordInputProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone, type QuickAction, QuickActionsBar, type QuickActionsBarProps, ROLE_COMBO_OPTIONS, RadialGauge, type RadialGaugeProps, type RadialGaugeSize, RankedRow, type RankedRowProps, RoleBadge, type RoleBadgeProps, RoleComboBox, type RoleComboBoxProps, type RoleOption, type ScoreDirection, type ScoreRampTone, type ScoreThresholds, type ScoreTone, ScoreValue, type ScoreValueProps, type ScoreValueSize, type ScoreValueTone, type ScoreValueWeight, ScoredRow, type ScoredRowAlign, type ScoredRowGap, type ScoredRowProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, type SelectOption, type SelectProps, SolidAlertTriangle, SolidArrowRight, SolidChartBar, SolidCheck, SolidClock, SolidGlobe, SolidInfoCircle, SolidMapPin, SolidShieldCheck, Sparkline, type SparklineProps, type SparklineSize, type SparklineVariant, StatNumber, type StatNumberProps, type StatNumberSize, type StatNumberWeight, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusChip, type StatusChipProps, StatusDot, type StatusDotProps, type StatusDotTone, type StatusTone, type StepItem, type StepStatus, Stepper, type StepperProps, type TabItem, TableCellBadge, type TableCellBadgeProps, TableCellLeadText, type TableCellLeadTextProps, TableCellProgress, type TableCellProgressProps, type TableCellSize, TableCellText, type TableCellTextProps, Tabs, type TabsProps, type TabsSize, type TabsVariant, TagPill, type TagPillProps, type TagPillTone, Textarea, type TextareaProps, TileGrid, type TileGridBreakpoint, type TileGridColumns, type TileGridProps, Toggle, type ToggleProps, type ToggleSize, TrailChip, type TrailChipProps, type TrendDirection, TrendLabel, type TrendLabelProps, type TrendLabelSize, type TrendLabelWeight, type UserAccountStatus, UserStatusPill, type UserStatusPillProps, WidgetFooter, type WidgetFooterProps, WidgetHeader, type WidgetHeaderEyebrowVariant, type WidgetHeaderProps, WidgetTitle, type WidgetTitleProps, type WidgetTitleSize, cn, getScoreTone, resolveChartColor, useOverlayDismiss };
+export { AIChatBar, type AIChatBarProps, AISuggestionChip, type AISuggestionChipProps, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AccordionType, AspectRatio, type AspectRatioProps, AuroraBackdrop, Avatar, AvatarBlock, type AvatarBlockProps, AvatarGroup, type AvatarGroupProps, type AvatarGroupSpacing, type AvatarImageProps, type AvatarInitialProps, type AvatarProps, type AvatarShape, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, type BadgeVariant, Banner, type BannerProps, type BannerVariant, BarChart, type BarChartOrientation, type BarChartProps, type BarChartSeries, type BarChartSize, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, type BreadcrumbProps, Button, ButtonGroup, type ButtonGroupAlign, type ButtonGroupItem, type ButtonGroupProps, type ButtonGroupVariant, type ButtonProps, type ButtonSize, type ButtonVariant, CHART_SEQUENCE, CHART_TONE, CHART_TRACK, Calendar, type CalendarMode, type CalendarProps, Card, CardAction, type CardActionProps, CardBody, type CardBodyProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterAlign, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, type CardRadius, type CardSize, CardTitle, type CardTitleProps, type CardTone, Carousel, CarouselControls, type CarouselControlsProps, type CarouselProps, CarouselSlide, type CarouselSlideProps, CarouselViewport, type CarouselViewportProps, ChartLegend, type ChartLegendItem, type ChartLegendOrientation, type ChartLegendProps, type ChartTone, CheckIndicator, type CheckIndicatorProps, type CheckIndicatorStatus, Checkbox, type CheckboxProps, type CheckboxSize, type CheckedGroup, CheckedGroupList, type CheckedGroupListColumns, type CheckedGroupListProps, ChecklistRow, type ChecklistRowProps, type ChecklistRowState, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, type ColumnDef, Combobox, type ComboboxOption, type ComboboxProps, Command, type CommandItem, type CommandProps, ConfirmDialog, type ConfirmDialogProps, ContextMenu, MenuCheckboxItem as ContextMenuCheckboxItem, ContextMenuContent, type ContextMenuContentProps, MenuGroup as ContextMenuGroup, MenuItem as ContextMenuItem, MenuLabel as ContextMenuLabel, type ContextMenuProps, MenuRadioGroup as ContextMenuRadioGroup, MenuRadioItem as ContextMenuRadioItem, MenuSeparator as ContextMenuSeparator, MenuShortcut as ContextMenuShortcut, ContextMenuTrigger, type ContextMenuTriggerProps, ControlSizeProvider, type ControlSizeProviderProps, CountBadge, type CountBadgeProps, DEFAULT_SCORE_THRESHOLDS, DataTable, type DataTableAlign, type DataTableDensity, type DataTableProps, DatePicker, type DatePickerProps, type DateRange, DetailGrid, type DetailGridColumns, type DetailGridProps, DetailItem, type DetailItemLayout, type DetailItemProps, type DetailItemSpan, DonutChart, type DonutChartProps, type DonutChartSize, type DonutSegment, Drawer, type DrawerProps, DropdownMenu, MenuCheckboxItem as DropdownMenuCheckboxItem, type MenuCheckboxItemProps as DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, MenuGroup as DropdownMenuGroup, type MenuGroupProps as DropdownMenuGroupProps, MenuItem as DropdownMenuItem, type MenuItemProps as DropdownMenuItemProps, type MenuItemTone as DropdownMenuItemTone, MenuLabel as DropdownMenuLabel, type MenuLabelProps as DropdownMenuLabelProps, type DropdownMenuProps, MenuRadioGroup as DropdownMenuRadioGroup, type MenuRadioGroupProps as DropdownMenuRadioGroupProps, MenuRadioItem as DropdownMenuRadioItem, type MenuRadioItemProps as DropdownMenuRadioItemProps, MenuSeparator as DropdownMenuSeparator, type MenuSeparatorProps as DropdownMenuSeparatorProps, MenuShortcut as DropdownMenuShortcut, type MenuShortcutProps as DropdownMenuShortcutProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, EmptyState, type EmptyStateProps, type EmptyStateSize, type EmptyStateVariant, EntityIconBadge, type EntityIconBadgeProps, type EntityIconBadgeSize, type EntityIconBadgeTone, EyebrowLabel, type EyebrowLabelProps, type EyebrowLabelVariant, Field, type FieldContextValue, FieldDescription, FieldError, FieldGroup, type FieldGroupProps, FieldHint, FieldLabel, type FieldLabelProps, FieldLegend, type FieldLegendProps, type FieldOrientation, type FieldProps, FieldSeparator, type FieldSeparatorProps, FieldSet, type FieldSetProps, type FieldTextProps, FileDropZone, type FileDropZoneProps, FileRow, type FileRowProps, FilterBar, type FilterBarProps, type FilterBarSize, FormCard, FormCardFooter, type FormCardFooterProps, FormCardHeader, type FormCardHeaderProps, Heading, HoverCard, type HoverCardProps, IconButton, type IconButtonProps, type IconButtonVariant, IconTextRow, type IconTextRowProps, InlineAlert, type InlineAlertProps, type InlineAlertTone, Input, InputControl, type InputControlProps, InputGroup, InputGroupAddon, type InputGroupAddonProps, type InputGroupAlign, InputGroupInput, type InputGroupInputProps, type InputGroupProps, InputGroupText, type InputGroupTextProps, InputOTP, type InputOTPMode, type InputOTPProps, type InputProps, type InputSize, Kbd, type KbdProps, type KbdSize, Label, type LabelProps, LegendDot, type LegendDotProps, type LegendDotShape, type LegendDotSize, ListRow, type ListRowDensity, type ListRowDivider, type ListRowProps, Menubar, MenuCheckboxItem as MenubarCheckboxItem, MenubarContent, type MenubarContentProps, MenuGroup as MenubarGroup, MenuItem as MenubarItem, MenuLabel as MenubarLabel, MenubarMenu, type MenubarMenuProps, type MenubarProps, MenuRadioGroup as MenubarRadioGroup, MenuRadioItem as MenubarRadioItem, MenuSeparator as MenubarSeparator, MenuShortcut as MenubarShortcut, MenubarTrigger, type MenubarTriggerProps, MiniBarChart, type MiniBarChartOrientation, type MiniBarChartProps, type MiniBarChartSize, Modal, ModalBody, type ModalBodyProps, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterAlign, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, type ModalTone, MultiSelectCard, type MultiSelectCardProps, type MultiSelectCardSize, NavItem, type NavItemProps, type NavItemSize, type NavItemVariant, NavigationMenu, NavigationMenuItem, type NavigationMenuItemProps, type NavigationMenuOrientation, type NavigationMenuProps, type NavigationMenuVariant, NoteConfirmModal, type NoteConfirmModalProps, NumberedList, type NumberedListGap, type NumberedListItem, type NumberedListProps, OVERLAY_SCRIM, PageHeading, type PageHeadingProps, type PageHeadingSize, PageToolbar, type PageToolbarProps, type PageToolbarSize, Pagination, type PaginationProps, type PaginationType, PasswordInput, type PasswordInputProps, Popover, PopoverContent, type PopoverContentProps, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Portal, type PortalProps, ProgressBar, type ProgressBarProps, type ProgressBarSize, type ProgressBarTone, type QuickAction, QuickActionsBar, type QuickActionsBarProps, ROLE_COMBO_OPTIONS, RadialGauge, type RadialGaugeProps, type RadialGaugeSize, Radio, RadioGroup, type RadioGroupOrientation, type RadioGroupProps, type RadioProps, Resizable, type ResizableDirection, ResizableHandle, type ResizableHandleProps, ResizablePanel, type ResizablePanelProps, type ResizableProps, RoleBadge, type RoleBadgeProps, type RoleBadgeTone, RoleComboBox, type RoleComboBoxProps, type RoleOption, SCROLLBAR_CLASSES, type ScoreDirection, type ScoreRampTone, type ScoreThresholds, type ScoreTone, ScoreValue, type ScoreValueProps, type ScoreValueSize, type ScoreValueTone, type ScoreValueWeight, ScoredRow, type ScoredRowAlign, type ScoredRowGap, type ScoredRowProps, ScrollArea, type ScrollAreaAxis, type ScrollAreaProps, SearchInput, type SearchInputProps, SegmentedControl, type SegmentedControlOption, type SegmentedControlProps, Select, SelectControl, type SelectControlProps, type SelectOption, type SelectOptionGroup, type SelectProps, Separator, type SeparatorOrientation, type SeparatorProps, Skeleton, type SkeletonProps, type SkeletonShape, Slider, type SliderProps, Sparkline, type SparklineProps, type SparklineSize, type SparklineVariant, Spinner, type SpinnerProps, type SpinnerSize, StatNumber, type StatNumberProps, type StatNumberSize, type StatNumberWeight, StatTile, type StatTileProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, StatusChip, type StatusChipProps, StatusDot, type StatusDotProps, type StatusDotTone, type StatusTone, type StepItem, type StepStatus, Stepper, type StepperProps, type StepperSize, StepsList, type StepsListProps, Subheading, Subtitle, Switch, type SwitchProps, type SwitchSize, type TabItem, Table, TableBody, TableCaption, type TableCaptionProps, TableCell, TableCellBadge, type TableCellBadgeProps, TableCellLeadText, type TableCellLeadTextProps, TableCellProgress, type TableCellProgressProps, type TableCellProps, type TableCellSize, TableCellText, type TableCellTextProps, type TableDensity, TableFooter, TableHead, type TableHeadProps, TableHeader, type TableProps, TableRow, type TableRowProps, type TableSortDirection, Tabs, type TabsActivation, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, type TabsSize, type TabsVariant, TagPill, type TagPillProps, type TagPillTone, Text, TextCode, TextEmphasis, TextLink, type TextLinkProps, TextList, type TextListDensity, TextListItem, type TextListItemProps, type TextListProps, type TextListVariant, type TextProps, TextSmall, TextStrong, TextTiny, Textarea, TextareaControl, type TextareaControlProps, type TextareaProps, TileGrid, type TileGridBreakpoint, type TileGridColumns, type TileGridProps, TitleHero, TitlePage, type ToastOptions, type ToastRecord, type ToastTone, Toaster, type ToasterPosition, type ToasterProps, Toggle, ToggleGroup, ToggleGroupItem, type ToggleGroupItemProps, type ToggleGroupProps, type ToggleGroupType, type ToggleProps, type ToggleSize, type ToggleVariant, Tooltip, type TooltipProps, TrailChip, type TrailChipProps, type TrendDirection, TrendLabel, type TrendLabelProps, type TrendLabelSize, type TrendLabelWeight, type UserAccountStatus, UserStatusPill, type UserStatusPillProps, WidgetFooter, type WidgetFooterProps, WidgetHeader, type WidgetHeaderEyebrowVariant, type WidgetHeaderProps, WidgetTitle, type WidgetTitleProps, type WidgetTitleSize, cn, getScoreTone, paginationRange, resolveChartColor, tabId, tabPanelId, useControlSize, useFieldContext, useFieldControl, useOverlayDismiss, useToast };