prime-ui-kit 0.15.0 → 0.17.0

package/dist/components/accordion/Accordion.d.ts

@@ -1,28 +1,60 @@
 import * as React from "react";
 import type { ControlSize } from "../../internal/states";
 type AccordionBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> & {
-    /** Trigger, icon and content spacing tier. Default `m`. */
+    /**
+     * Tier of trigger height, text, icon and padding. Without it the tier of its host, else `m`.
+     */
     size?: ControlSize;
-    /** `grouped` — one frame without gaps (default); `separate` — every item is its own card. */
+    /**
+     * `grouped` — one surface with hairlines between items; `separate` — every item is its own card.
+     */
     layout?: "grouped" | "separate";
     ref?: React.Ref<HTMLDivElement>;
 };
 /** One open item at a time; `value` is the open item (`""` when all are closed). */
 export type AccordionSingleProps = AccordionBaseProps & {
+    /**
+     * Any number of open items; `value` becomes a `string[]`.
+     */
     multiple?: false;
+    /**
+     * Open item (`""` — none), or the list of open items with `multiple` (controlled).
+     */
     value?: string;
+    /**
+     * Initially open item(s) (uncontrolled).
+     */
     defaultValue?: string;
+    /**
+     * Called with the new open item, or the new list with `multiple`.
+     */
     onValueChange?: (value: string) => void;
-    /** When `false`, the open item cannot be closed by clicking it. Default `true`. */
+    /**
+     * Without `multiple`: `false` keeps the open item open on a second click.
+     */
     collapsible?: boolean;
 };
 /** Any number of open items; `value` lists them. */
 export type AccordionMultipleProps = AccordionBaseProps & {
+    /**
+     * Any number of open items; `value` becomes a `string[]`.
+     */
     multiple: true;
+    /**
+     * Open item (`""` — none), or the list of open items with `multiple` (controlled).
+     */
     value?: string[];
+    /**
+     * Initially open item(s) (uncontrolled).
+     */
     defaultValue?: string[];
+    /**
+     * Called with the new open item, or the new list with `multiple`.
+     */
     onValueChange?: (value: string[]) => void;
-    /** Every item of a multiple accordion closes on its own click. */
+    /**
+     * Without `multiple`: `false` keeps the open item open on a second click.
+     */
     collapsible?: never;
 };
 export type AccordionRootProps = AccordionSingleProps | AccordionMultipleProps;
@@ -31,7 +63,13 @@ declare namespace AccordionRoot {
     var displayName: string;
 }
 export type AccordionItemProps = React.HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Item id used in `value`.
+     */
     value: string;
+    /**
+     * The item cannot be toggled; its trigger is disabled.
+     */
     disabled?: boolean;
     ref?: React.Ref<HTMLDivElement>;
 };
@@ -39,10 +77,16 @@ declare function AccordionItem({ className, value, disabled, children, ...rest }
 declare namespace AccordionItem {
     var displayName: string;
 }
+/** The level of an item's heading in the page outline. */
+export type AccordionHeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
 export type AccordionHeaderProps = React.HTMLAttributes<HTMLHeadingElement> & {
+    /**
+     * Heading level in the page outline: one below the heading of the section that holds the accordion.
+     */
+    as?: AccordionHeadingLevel;
     ref?: React.Ref<HTMLHeadingElement>;
 };
-declare function AccordionHeader({ className, ...rest }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
+declare function AccordionHeader({ as: Heading, className, ...rest }: AccordionHeaderProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AccordionHeader {
     var displayName: string;
 }
@@ -55,6 +99,9 @@ declare namespace AccordionTrigger {
     var displayName: string;
 }
 export type AccordionIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /**
+     * The icon, e.g. `<Icon name="field.calendar" />`.
+     */
     children: React.ReactNode;
     ref?: React.Ref<HTMLSpanElement>;
 };

package/dist/components/avatar/Avatar.d.ts

@@ -4,12 +4,20 @@ import type { ControlSize, PaletteColor } from "../../internal/states";
 /** `xs` 20 · `s` 24 · `m` 32 · `l` 40 · `xl` 48 · `2xl` 64 (`--prime-avatar-*`). */
 export type AvatarSize = ControlSize | "2xl";
 export type AvatarRootProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Default `m`, or the size of the surrounding `Avatar.Group`. */
+    /**
+     * Diameter 20 · 24 · 32 · 40 · 48 · 64 px. Inside `Avatar.Group` the group size is used when it is not set.
+     */
     size?: AvatarSize;
-    /** Fallback color (`--prime-color-palette-<hue>-*`). Default `gray`. */
+    /**
+     * Palette hue of the fallback; derive it from a stable user id.
+     */
     color?: PaletteColor;
     ref?: React.Ref<HTMLDivElement>;
 };
+/**
+ * The person's picture. Named by `aria-label` it is one image of that name (`role="img"`), so the
+ * name holds whether the photo, the initials or an icon shows.
+ */
 declare function AvatarRoot({ size, color, className, children, ...rest }: AvatarRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarRoot {
     var displayName: string;
@@ -19,10 +27,15 @@ export type AvatarImageProps = ImageSlotImageProps;
 export type AvatarFallbackProps = ImageSlotFallbackProps;
 export type AvatarPresence = "online" | "offline" | "away" | "busy";
 export type AvatarStatusLabels = Record<AvatarPresence, string>;
+export declare const AVATAR_STATUS_LABELS: AvatarStatusLabels;
 export type AvatarStatusProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
-    /** Presence shown as a dot on the avatar's bottom-end edge. */
+    /**
+     * Presence state, told by shape and color: `online` a full green dot, `away` a warning crescent, `busy` a danger dot with a bar, `offline` a hollow gray ring.
+     */
     status: AvatarPresence;
-    /** Accessible names of the presence states (Russian defaults). */
+    /**
+     * Accessible names of the states, see Labels.
+     */
     labels?: Partial<AvatarStatusLabels>;
     ref?: React.Ref<HTMLSpanElement>;
 };
@@ -32,21 +45,31 @@ declare namespace AvatarStatus {
     var displayName: string;
 }
 export type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Size of every member without its own `size`. Default `m`. */
+    /**
+     * Size of every `Avatar.Root` / `Avatar.Overflow` inside without its own `size`; unset, they stay `m`.
+     */
     size?: AvatarSize;
     ref?: React.Ref<HTMLDivElement>;
 };
-/** An overlapping row of avatars (`role="group"`); rings match the surface. */
+/**
+ * An overlapping row of avatars (`role="group"`); rings match the surface. Its `size` is the size
+ * of every member without its own (they default to `m`).
+ */
 declare function AvatarGroup({ size, className, role, ...rest }: AvatarGroupProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarGroup {
     var displayName: string;
 }
 export type AvatarOverflowProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Default `m`, or the size of the surrounding `Avatar.Group`. */
+    /**
+     * Diameter; inside `Avatar.Group` the group size when not set.
+     */
     size?: AvatarSize;
     ref?: React.Ref<HTMLDivElement>;
 };
-/** The «+N» cell at the end of a group, the same diameter as its avatars. */
+/**
+ * The «+N» cell at the end of a group, the same diameter as its avatars; named by `aria-label`
+ * («Ещё 3 участника») it is an image of that name.
+ */
 declare function AvatarOverflow({ size, className, ...rest }: AvatarOverflowProps): import("react/jsx-runtime").JSX.Element;
 declare namespace AvatarOverflow {
     var displayName: string;

package/dist/components/badge/Badge.d.ts

@@ -1,66 +1,133 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor, Variant } from "../../internal/states";
+import type { ControlSize, PaletteColor, Tone, Variant } from "../../internal/states";
 export type BadgeLabels = {
     /** Accessible name of the remove button; include the badge text, e.g. «Убрать фильтр «Москва»». */
     remove: string;
     /** Spoken when the `onRemove` promise rejects and the badge stays. */
     removeFailed: string;
 };
-export type BadgeRootProps = {
-    /** Palette hue. Default `gray`. */
+export declare const BADGE_LABELS: BadgeLabels;
+/** A status the badge states (`tone`) or a category hue it carries (`color`), never both. */
+type BadgeHueProps = {
+    /**
+     * Palette hue: a category (a team, a tag); the text carries the meaning. Not together with `tone`.
+     */
     color?: PaletteColor;
-    /** Treatment. Default `soft`. */
+    /**
+     * A status in the role colors (paid, overdue, failed); `neutral` is the gray hue. Not together with `color`.
+     */
+    tone?: never;
+} | {
+    /**
+     * A status in the role colors (paid, overdue, failed); `neutral` is the gray hue. Not together with `color`.
+     */
+    tone: Extract<Tone, "neutral" | "success" | "warning" | "danger" | "info">;
+    /**
+     * Palette hue: a category (a team, a tag); the text carries the meaning. Not together with `tone`.
+     */
+    color?: never;
+};
+export type BadgeRootProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "onClick" | "color"> & BadgeHueProps & {
+    /**
+     * Treatment.
+     */
     variant?: Exclude<Variant, "ghost">;
-    /** Badge tier; without it the badge follows the surrounding control one tier down. */
+    /**
+     * Badge tier, 16 · 20 · 24 · 28 · 32 px high. Without it the badge follows the surrounding control one tier down; outside a control it is `m`.
+     */
     size?: ControlSize;
     /**
-     * Shows the remove segment at the end (an applied filter, a selected value). Return the save's
-     * promise to remove on a server: the badge waits dimmed with a spinner in the segment; resolve —
-     * take it out of your list before resolving, it leaves with its exit; reject — it stays and
-     * `labels.removeFailed` is announced.
+     * `square` — a tile as wide as it is tall, the text centred: a file format («PDF»), a short code.
+     */
+    shape?: "chip" | "square";
+    /**
+     * Adds the full-height remove segment at the end; called on its click. Return the request's promise: the badge waits with a spinner; take it out of your list before resolving; on reject it stays.
      */
     onRemove?: () => void | Promise<void>;
     /**
-     * The badge waits on a request (a value its owner is still creating): dimmed, `aria-busy`, a
-     * spinner in the remove segment, which takes no press. A promise from `onRemove` does this itself.
+     * The badge waits on a request (a value its owner is still creating): dimmed, `aria-busy`, a spinner in the remove segment, which takes no press. A promise from `onRemove` does the same on its own.
      */
     loading?: boolean;
     /**
-     * Makes the body a button covering the whole badge (a toggle chip, a filter value). Receives the
-     * click, so Alt / Shift clicks can mean something else.
+     * A toggle chip (a filter value): the body becomes a `<button>` over the whole badge with `aria-pressed`; on takes the selected look (accent soft).
      */
-    onPress?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Toggle state of a pressable badge: `aria-pressed` and `data-pressed`. */
     pressed?: boolean;
+    /**
+     * The initial state of an uncontrolled toggle chip; a press flips it.
+     */
+    defaultPressed?: boolean;
+    /**
+     * Fires with the new state when the toggle chip is pressed.
+     */
+    onPressedChange?: (pressed: boolean) => void;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<BadgeLabels>;
+    /**
+     * Muted look for every variant, `aria-disabled`; the body button, remove and action get native `disabled`.
+     */
     disabled?: boolean;
+    /**
+     * Text, `Badge.Dot`, `Badge.Icon`, one `Badge.Action`. Only `Badge.Icon` children (no remove or action) make a square icon-only badge.
+     */
     children?: React.ReactNode;
+    /**
+     * Class on the badge.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
-} & React.HTMLAttributes<HTMLSpanElement>;
+};
 export type BadgeIconProps = {
+    /**
+     * The icon (`Icon`).
+     */
     children: React.ReactNode;
+    /**
+     * Class on the icon box.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
 export type BadgeDotProps = {
+    /**
+     * A dot of its own hue (the solid step) instead of the text color: a project color, an attention mark.
+     */
+    color?: PaletteColor;
+    /**
+     * Class on the dot.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
-} & React.HTMLAttributes<HTMLSpanElement>;
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "color">;
 export type BadgeActionProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "onClick" | "children"> & {
-    /** Accessible name and tooltip of the action («Скрыть billing»). */
+    /**
+     * Accessible name and tooltip («Скрыть billing»).
+     */
     label: string;
+    /**
+     * Runs the action.
+     */
     onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    /** Keeps the action shown, not only on hover and focus (e.g. while the state it sets is on). */
+    /**
+     * Keeps the action shown, not only on hover and focus (while the state it sets is on).
+     */
     persistent?: boolean;
+    /**
+     * The action is unavailable.
+     */
     disabled?: boolean;
-    /** Toggle state of the action: `aria-pressed`. */
+    /**
+     * Toggle state of the action: `aria-pressed`; on, the segment stays shown with the pressed wash.
+     */
     pressed?: boolean;
-    /** The glyph; a minus by default. Sized to the tier icon. */
+    /**
+     * A custom glyph at the tier icon size; a minus by default.
+     */
     children?: React.ReactNode;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function BadgeRoot({ color, variant, size: sizeProp, onRemove, onPress, pressed, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeRoot({ color, tone, variant, size: sizeProp, shape, onRemove, pressed: pressedProp, defaultPressed, onPressedChange, loading, labels, disabled: disabledProp, children, className, ref, ...rest }: BadgeRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeRoot {
     var displayName: string;
 }
@@ -69,10 +136,11 @@ declare namespace BadgeIcon {
     var displayName: string;
 }
 /**
- * A status dot in the current text color. Inside a badge it takes the badge tier; standalone (a
- * marker on an icon, before a label) it takes the tier of the surrounding control.
+ * A status dot in the current text color, or in the solid step of a palette hue (`color`). Inside
+ * a badge it takes the badge tier; standalone (a marker on an icon, before a label) it takes the
+ * tier of the surrounding control.
  */
-declare function BadgeDot({ className, ...rest }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
+declare function BadgeDot({ color, className, ...rest }: BadgeDotProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BadgeDot {
     var displayName: string;
 }

package/dist/components/banner/Banner.d.ts

@@ -1,31 +1,38 @@
 import * as React from "react";
-import type { ControlSize, Tone, Variant } from "../../internal/states";
+import { type ControlSize, type Tone, type Variant } from "../../internal/states";
 export type BannerLabels = {
     /** `aria-label` of the close button. */
     dismiss: string;
 };
+export declare const BANNER_LABELS: BannerLabels;
 export type BannerRootProps = React.HTMLAttributes<HTMLDivElement> & {
-    /** Treatment: `soft` tinted fill (default), `solid` saturated fill, `outline` surface with a tone ring. */
+    /**
+     * `soft` tinted fill, `solid` saturated fill for urgent messages, `outline` card fill with a tone ring.
+     */
     variant?: Exclude<Variant, "ghost">;
-    /** Semantic color. Default `info`. */
+    /**
+     * Semantic color of the message.
+     */
     tone?: Tone;
-    /** Spacing and type tier. Default `m`. */
+    /**
+     * Spacing, icon and title follow the control tier; the description is one step smaller. Without it the tier of the host.
+     */
     size?: ControlSize;
     /**
-     * `inset` (default): rounded block in the content flow or inside a card.
-     * `page`: edge-to-edge strip (no radius) at the top of a page or app shell; content follows the
-     * page content column.
+     * `inset` — rounded block in the flow or in a card; `page` — edge-to-edge strip above a page, content aligned to the page column.
      */
     placement?: "inset" | "page";
     /**
-     * Renders a close button and calls this on its click. The parent unmounts the banner; it closes
-     * up in place, and the parent moves focus somewhere sensible.
+     * Renders a close button (top-right, or last in `Banner.Actions`) and calls this on click; the parent unmounts the banner, which closes up in place; focus inside it moves to the next tab stop of the page.
      */
     onDismiss?: () => void;
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<BannerLabels>;
     ref?: React.Ref<HTMLDivElement>;
 };
-declare function BannerRoot({ variant, tone, size, placement, onDismiss, labels, className, children, ref, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BannerRoot({ variant, tone, size: sizeProp, placement, onDismiss, labels, className, children, ref, ...rest }: BannerRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BannerRoot {
     var displayName: string;
 }

package/dist/components/breadcrumb/Breadcrumb.d.ts

@@ -3,24 +3,37 @@ import type { ControlSize } from "../../internal/states";
 export type BreadcrumbLabels = {
     /** `aria-label` of the `nav` landmark. */
     nav: string;
-    /** Accessible text of `Breadcrumb.Ellipsis` (skipped levels). */
+    /** Name of the «…» that stands for skipped levels (the collapse menu, `Breadcrumb.Ellipsis`). */
     ellipsis: string;
 };
+export declare const BREADCRUMB_LABELS: BreadcrumbLabels;
 export type BreadcrumbRootProps = React.HTMLAttributes<HTMLElement> & {
-    /** Text of the links, the current page and the ellipsis; the chevrons take the same tier. */
+    /**
+     * Text of the links, the current page and the ellipsis; chevrons, icons and the collapse menu take the same tier. Without it the tier of its host, else `m`.
+     */
     size?: ControlSize;
-    /** Built-in strings. */
+    /**
+     * Built-in strings, see Labels.
+     */
     labels?: Partial<BreadcrumbLabels>;
     ref?: React.Ref<HTMLElement>;
 };
-declare function BreadcrumbRoot({ children, className, size, labels: labelsProp, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
+declare function BreadcrumbRoot({ children, className, size: sizeProp, labels: labelsProp, ref, ...rest }: BreadcrumbRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace BreadcrumbRoot {
     var displayName: string;
 }
 export type BreadcrumbItemProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "aria-label"> & {
+    /**
+     * Renders a link; without it the item is text.
+     */
     href?: string;
+    /**
+     * Current page: `aria-current="page"` (on the link when `href` is set), primary text, medium weight. Usually the last item, without `href`.
+     */
     current?: boolean;
-    /** For a link without visible text (e.g. only a «home» icon). Goes to the link. */
+    /**
+     * Name of a link without visible text (e.g. a home icon); set on the link, not the `li`.
+     */
     "aria-label"?: string;
     ref?: React.Ref<HTMLLIElement>;
 };

package/dist/components/button/Button.d.ts

@@ -1,89 +1,148 @@
 import * as React from "react";
 import type { ControlSize, Tone, Variant } from "../../internal/states";
-/**
- * `tone="inherit"` takes the host's text color (a close button on a solid Banner): fills are a
- * `currentColor` wash, so it has no `solid` treatment.
- */
+/** `tone="inherit"` takes the host's text color: fills are a `currentColor` wash, never solid. */
 type ButtonColorProps = {
     /**
-     * Visual treatment. Default `solid`. `shade` — the media shade with a blur and its light
-     * glyph, for a button that stands over a picture, a video or a video circle; with
-     * `tone="danger"` it turns the danger disk (a failed transfer).
+     * Visual treatment: fill, soft fill, line or transparent. `shade` — the media shade for a button over a picture or video (with `tone="danger"`, the error disk); `glass` — the glass of a floating bar.
      */
-    variant?: Variant | "shade";
+    variant?: Variant | "shade" | "glass";
     /**
-     * Semantic color. Default `accent`; `danger` for destructive actions; `success` for an action
-     * that is done («Оплачено»).
+     * Meaning: primary, secondary, done (`success`) or destructive (`danger`). `inherit` takes the host's text color for an action on a colored host; only with `ghost`, `soft` or `outline`.
      */
     tone?: Extract<Tone, "accent" | "neutral" | "success" | "danger">;
 } | {
+    /**
+     * Visual treatment: fill, soft fill, line or transparent. `shade` — the media shade for a button over a picture or video (with `tone="danger"`, the error disk); `glass` — the glass of a floating bar.
+     */
     variant: Exclude<Variant, "solid">;
-    /** Takes the host's text color; for actions placed on a colored host. */
+    /**
+     * Meaning: primary, secondary, done (`success`) or destructive (`danger`). `inherit` takes the host's text color for an action on a colored host; only with `ghost`, `soft` or `outline`.
+     */
     tone: "inherit";
 };
-/**
- * `circle` is a disk with an icon only: its name is the `aria-label` (a visible label has no room).
- */
+/** `circle` is a disk with an icon only: its name is the `aria-label` (a visible label has no room). */
 type ButtonShapeProps = {
     /**
-     * Outline. Default `square` (the tier's radius). `circle` — a disk with only a `Button.Icon`:
-     * as wide as it is tall, full radius, the same tiers, tones and variants; its focus ring,
-     * touch area and press (`press-scale-compact`) follow the circle.
+     * Outline. `circle` — a disk as wide as it is tall, with only a `Button.Icon` inside; same tiers, tones and variants. Requires `aria-label`.
      */
     shape?: "square";
 } | {
+    /**
+     * Outline. `circle` — a disk as wide as it is tall, with only a `Button.Icon` inside; same tiers, tones and variants. Requires `aria-label`.
+     */
     shape: "circle";
-    /** A circle has no visible label: it is named here. */
+    /**
+     * The name of a button without a visible label; required with `shape="circle"`.
+     */
     "aria-label": string;
 };
+/**
+ * A `<button>` runs the long-action modes; with `asChild` the child (a link) owns its content, so
+ * it takes none of them.
+ */
+type ButtonElementProps = {
+    /**
+     * Merges Button props and styles onto the single child element (a link) instead of rendering `<button>`. `disabled`/`loading` become `aria-disabled`; `progress` and `holdToConfirm` need a `<button>`.
+     */
+    asChild?: false;
+    /**
+     * As on `Button.Root`.
+     */
+    progress?: number | null;
+    /**
+     * As on `Button.Root`.
+     */
+    holdToConfirm?: boolean;
+    /**
+     * As on `Button.Root`.
+     */
+    onConfirm?: () => void | Promise<void>;
+    /**
+     * As on `Button.Root`.
+     */
+    labels?: Partial<ButtonLabels>;
+} | {
+    /**
+     * Merges Button props and styles onto the single child element (a link) instead of rendering `<button>`. `disabled`/`loading` become `aria-disabled`; `progress` and `holdToConfirm` need a `<button>`.
+     */
+    asChild: true;
+    /**
+     * As on `Button.Root`.
+     */
+    progress?: never;
+    /**
+     * As on `Button.Root`.
+     */
+    holdToConfirm?: never;
+    /**
+     * As on `Button.Root`.
+     */
+    onConfirm?: never;
+    /**
+     * As on `Button.Root`.
+     */
+    labels?: never;
+    /**
+     * Custom content; default is the pipette icon.
+     */
+    children: React.ReactElement;
+};
 export type ButtonLabels = {
     /** Description of a hold-to-confirm button for assistive tech. */
     holdHint: string;
 };
-export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-pressed"> & ButtonColorProps & ButtonShapeProps & {
-    /** Tier. Default: the tier of the surrounding control (a form, a panel, a field), else `m`. */
+export declare const BUTTON_LABELS: ButtonLabels;
+export type ButtonRootProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size" | "aria-pressed"> & ButtonColorProps & ButtonShapeProps & ButtonElementProps & {
+    /**
+     * Control tier: height 28 · 32 · 36 · 40 · 48, padding, text, icon, radius. Without it the button takes the tier of its host (LoginForm, Popover, a field, a panel with a size), else `m`.
+     */
     size?: ControlSize;
+    /**
+     * As on `Button.Root`.
+     */
+    density?: "regular" | "tight" | "inline";
+    /**
+     * As on `Button.Root`.
+     */
+    align?: "center" | "start";
+    /**
+     * As on `Button.Root`.
+     */
     fullWidth?: boolean;
+    /**
+     * As on `Button.Root`.
+     */
     loading?: boolean;
     /**
-     * A toggle button: `true` on, `false` off (`aria-pressed`); the on state takes the selected look
-     * (accent soft fill). Leave it out for an ordinary action. For a set of toggles use ButtonGroup.
+     * As on `Button.Root`.
      */
     pressed?: boolean;
     /**
-     * Progress of a long action started by this button, `0…1`; `null` — under way, the share
-     * unknown. The button stays pressable (a cancel) and is `aria-busy`. On a square a fill grows
-     * inside it (`null`: a spinner takes the leading icon's place); on a circle a ring runs along
-     * its inner edge in the glyph's color and always turns. The label or description carries the
-     * number («Скачивание 42%»). Remove it when done: the fill or the ring fades where it is.
+     * As on `Button.Root`.
      */
-    progress?: number | null;
+    defaultPressed?: boolean;
     /**
-     * The action needs a held press: the fill runs for 1.2 s and `onConfirm` fires at its end.
-     * Releasing earlier rolls the fill back and does nothing. Space and Enter hold too.
+     * As on `Button.Root`.
      */
-    holdToConfirm?: boolean;
+    onPressedChange?: (pressed: boolean) => void;
     /**
-     * Fires when a `holdToConfirm` press completes; the action goes here, not in `onClick`. Return
-     * the request's promise: the full fill stays and the button is `loading` until it settles;
-     * resolve — the fill fades; reject — the fill rolls back.
+     * As on `Button.Root`.
      */
-    onConfirm?: () => void | Promise<void>;
-    labels?: Partial<ButtonLabels>;
-    /**
-     * Merges Button props onto its single child element instead of rendering `<button>`.
-     * `disabled` / `loading` become `aria-disabled` (a link has no native `disabled`), `type` is
-     * dropped, and no spinner is added — the child owns its content.
-     */
-    asChild?: boolean;
+    current?: boolean;
     ref?: React.Ref<HTMLButtonElement>;
 };
-declare function ButtonRoot({ children, className, variant, tone, shape, size: sizeProp, fullWidth, type, loading: loadingProp, pressed, progress, holdToConfirm, onConfirm, labels, disabled: disabledProp, asChild, onClick, ref, ...rest }: ButtonRootProps): import("react/jsx-runtime").JSX.Element;
+declare function ButtonRoot({ children, className, variant, tone, shape, size: sizeProp, density, align, fullWidth, type, loading: loadingProp, pressed: pressedProp, defaultPressed, onPressedChange, current, progress, holdToConfirm, onConfirm, labels, disabled: disabledProp, asChild, onClick, ref, ...rest }: ButtonRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ButtonRoot {
     var displayName: string;
 }
 export type ButtonIconProps = {
+    /**
+     * The icon, e.g. `<Icon name="action.copy" />`; `Icon` without `size` takes the button tier. A new icon (another `name`) cross-fades in and plays its gesture once (`fast`).
+     */
     children: React.ReactNode;
+    /**
+     * Class on the icon box.
+     */
     className?: string;
     ref?: React.Ref<HTMLSpanElement>;
 } & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;