@acronis-platform/ui-react 5.5.9 → 7.0.0

package/dist/llms/dialog.md

@@ -1,6 +1,6 @@
 # Dialog
 
-> A higher-level "recipe" dialog built on top of the DialogRoot primitive parts. A single `variant` prop selects one of seven canned use-cases (default, rename, save changes, reset password, discard changes, accept, read-only) — each with its own title, body copy and footer buttons — plus a legacy `wide` escape hatch (no Figma preset, free-form footer via the `footer` prop) kept for backward compatibility with pre-Figma call sites. `children` overrides the body slot and `hasLoading` shows a `Loading` overlay. Colors, typography, and container/header/footer geometry resolve to the `--ui-dialog-*`/`--ui-footer-*` token tier (see tokens.yaml). In Figma the matching component set is named "DialogDefault"; the code-facing name is `Dialog`.
+> A higher-level "recipe" dialog built on top of the DialogRoot primitive parts. A single `variant` prop selects one of seven canned use-cases (default, rename, save changes, reset password, discard changes, accept, read-only) — each with its own title, body copy and footer buttons — plus a legacy `wide` escape hatch (no Figma preset, free-form footer via the `footer` prop) kept for backward compatibility with pre-Figma call sites. `children` overrides the body slot, `bodyClassName` styles its wrapper, and `hasLoading` shows a `Loading` overlay. The popup is top-aligned 48px from the viewport edge by default; `verticalAlign="center"` opts into vertical centering. Colors, typography, and container/header/footer geometry resolve to the `--ui-dialog-*`/`--ui-footer-*` token tier (see tokens.yaml). In Figma the matching component set is named "DialogDefault"; the code-facing name is `Dialog`.
 
 **Status:** draft · **Category:** overlays · **Since:** v0.58.0
 
@@ -25,6 +25,28 @@ import { Dialog } from '@acronis-platform/ui-react'
   <p>Any custom content.</p>
 </Dialog>
 
+{/* Full-height body with independent scroll panes */}
+<Dialog
+  variant="wide"
+  size="large"
+  title="Add a widget"
+  className="h-[90vh] max-w-[min(71rem,calc(100dvw-96px))]"
+  bodyClassName="flex-1 min-h-0 p-0 justify-start overflow-hidden"
+  defaultOpen
+>
+  <div className="flex min-h-0 min-w-0 flex-1">
+    <aside
+      tabIndex={0}
+      className="w-28 shrink-0 overflow-y-auto border-e border-border sm:w-60"
+    >
+      Categories
+    </aside>
+    <section tabIndex={0} className="min-h-0 min-w-0 flex-1 overflow-y-auto">
+      Widget cards
+    </section>
+  </div>
+</Dialog>
+
 {/* Interpolate the real object name into the canned title/body */}
 <Dialog variant="rename" objectName="Q3 Report.xlsx" open onOpenChange={setOpen} />
 
@@ -49,6 +71,10 @@ same `DialogRoot` + `DialogHeader` + `DialogFooter` boilerplate each time. In
 Figma the matching component set is named "DialogDefault"; the code-facing
 name is `Dialog`.
 
+The popup is horizontally centered and top-aligned 48px from the viewport edge
+by default, matching the full-screen product mockups. Set
+`verticalAlign="center"` for flows that need vertical centering.
+
 > **Status: draft.** Container/header/footer geometry and color resolve to the
 > `--ui-dialog-*`/`--ui-footer-*` token tier (reconciled against the Figma
 > "DialogDefault" node). `size="large"` (832px) is the one exception — a legacy
@@ -63,16 +89,19 @@ name is `Dialog`.
 - You have a legacy call site that needs a wider popup and fully custom footer
   buttons — use `variant="wide"` (see below). This is a backward-compatibility
   escape hatch, not a recommended pattern for new work.
+- You need a full-bleed or fixed-height body while keeping the recipe's header
+  and footer — use `bodyClassName` to adjust the body wrapper and compose the
+  panes inside `children`.
 - You need a body-only dialog with no title bar and/or no action bar — set
   `hasHeader`/`hasFooter` to `false`. Both default to `true`; this is beyond
   the strict Figma contract (all seven canned variants always show both).
 
 ## When not to use
 
-- You need a bespoke layout or extra parts none of the seven variants (or the
-  `wide` escape hatch) cover — this is a gap to raise with the design system
-  team (the underlying `DialogRoot` primitive is internal-only, not a public
-  escape hatch).
+- You need a completely bespoke dialog structure or extra parts the recipe
+  cannot express — this is a gap to raise with the design system team (the
+  underlying `DialogRoot` primitive is internal-only, not a public escape
+  hatch).
 - For transient, non-blocking feedback — use a toast.
 - For contextual hints anchored to an element — use a tooltip or popover.
 
@@ -95,15 +124,15 @@ name is `Dialog`.
 
 ## Parts
 
-| Part              | Element (default)  | Purpose                                              |
-| ----------------- | ------------------ | ---------------------------------------------------- |
-| `container`       | `div[role=dialog]` | The portaled, centered popup card.                   |
-| `header`          | `div`              | Top bar; title + close button.                       |
-| `title`           | `h2`               | Accessible dialog name (`aria-labelledby`).          |
-| `close-button`    | `button`           | Icon button that dismisses the dialog.               |
-| `body`            | `div`              | Variant copy or the `children` override.             |
-| `footer`          | `div`              | Right-aligned action bar; or the free-form `footer`. |
-| `loading-overlay` | `div`              | Spinner scrim shown while `hasLoading`.              |
+| Part              | Element (default)  | Purpose                                                 |
+| ----------------- | ------------------ | ------------------------------------------------------- |
+| `container`       | `div[role=dialog]` | The portaled popup card; centered (or top-aligned).     |
+| `header`          | `div`              | Top bar; title + close button.                          |
+| `title`           | `h2`               | Accessible dialog name (`aria-labelledby`).             |
+| `close-button`    | `button`           | Icon button that dismisses the dialog.                  |
+| `body`            | `div`              | Variant copy or `children`; styled via `bodyClassName`. |
+| `footer`          | `div`              | Right-aligned action bar; or the free-form `footer`.    |
+| `loading-overlay` | `div`              | Spinner scrim shown while `hasLoading`.                 |
 
 ## Example
 
@@ -118,6 +147,28 @@ import { Dialog } from '@acronis-platform/ui-react';
   <p>Any custom body content.</p>
 </Dialog>;
 
+// Full-bleed, fixed-height body with independent scroll panes
+<Dialog
+  variant="wide"
+  size="large"
+  title="Add a widget"
+  open
+  className="h-[90vh] max-w-[min(71rem,calc(100dvw-96px))]"
+  bodyClassName="flex-1 min-h-0 p-0 justify-start overflow-hidden"
+>
+  <div className="flex min-h-0 min-w-0 flex-1">
+    <aside
+      tabIndex={0}
+      className="w-28 shrink-0 overflow-y-auto border-e border-border sm:w-60"
+    >
+      Categories
+    </aside>
+    <section tabIndex={0} className="min-h-0 min-w-0 flex-1 overflow-y-auto">
+      Widget cards
+    </section>
+  </div>
+</Dialog>;
+
 // Busy state
 <Dialog variant="save changes" hasLoading open />;
 
@@ -146,6 +197,11 @@ import { Dialog } from '@acronis-platform/ui-react';
   <p>Body-only content — no title bar, no close button.</p>
 </Dialog>;
 
+// Opt into vertical centering when a flow calls for it
+<Dialog variant="default" verticalAlign="center" open>
+  <p>Any custom body content.</p>
+</Dialog>;
+
 // Legacy wide variant — free-form footer, kept for backward compatibility
 import { Button, DialogClose } from '@acronis-platform/ui-react';
 
@@ -174,6 +230,7 @@ import { Button, DialogClose } from '@acronis-platform/ui-react';
 | `loadingLabel` | `string` | `'Data is loading…'` | no | Overrides the loading overlay's accessible label. Ignored when `hasLoading` is `false`. |
 | `hasHeader` | `boolean` | `true` | no | Shows the header (title + close button). When `false`, the title is still rendered off-screen so the dialog keeps an accessible name — only the visible bar and close button are omitted. Beyond the strict Figma contract (all seven canned variants always show the header) — a ui-react-only extension, like `wide`/`size="large"`. |
 | `hasFooter` | `boolean` | `true` | no | Shows the footer (action buttons). Beyond the strict Figma contract (all seven canned variants always show the footer) — a ui-react-only extension, like `wide`/`size="large"`. When `false`, `footer` is not rendered either. |
+| `bodyClassName` | `string` | — | no | Adds classes to the Dialog body wrapper (React: `bodyClassName`) so a caller can adjust its padding, alignment, flex sizing, and overflow for full-bleed or fixed-height layouts. Classes merge with the defaults; `className` continues to style the popup container. |
 | `title` | `string` | — | no | Overrides the variant's default title, for localization or copy changes. |
 | `objectName` | `string` | — | no | The real name of the object being acted on (e.g. a file or resource name). Interpolated into the `rename`/`discard changes`/`accept` variants' canned title/body in place of the generic placeholder text (e.g. `rename` → "Rename {objectName}" and the field's prefilled value); ignored by variants that don't reference an object name. |
 | `objectNameLabel` | `string` | `'Object name'` | no | Overrides the accessible name of the `rename` variant's text field. Ignored by every other variant. |
@@ -185,6 +242,7 @@ import { Button, DialogClose } from '@acronis-platform/ui-react';
 | `default-open` | `boolean` | `false` | no | Initial open state when uncontrolled (React `defaultOpen`). |
 | `modal` | `boolean | 'trap-focus'` | `true` | no | Modal behavior — traps focus and locks background scroll while open. `'trap-focus'` keeps the focus trap but allows background interaction. |
 | `size` | `'sm' | 'large'` | `'sm'` | no | Popup max-width (forwarded to the underlying content). Defaults to `sm` (512px, the Figma-defined size), or to `large` (832px) when `variant` is `wide`. `large` predates the Figma node and has no design token — a legacy backward-compatibility size, not a design-system width scale. |
+| `verticalAlign` | `'center' | 'top'` | `'top'` | no | Vertical placement of the popup (forwarded to the underlying content). `top` (the default) pins it 48px from the top edge of the viewport; `center` centers it vertically, keeping its content height. A ui-react-only extension beyond the Figma contract, like `size="large"`. |
 | `portal` | `boolean` | `true` | no | Render the content inside a portal (forwarded to the underlying content). Required for correct stacking; disable only when supplying your own portal ancestor. |
 | `keepMounted` | `boolean` | — | no | Keep the content mounted while closed (forwarded to the underlying content's portal). |
 
@@ -241,6 +299,33 @@ Scenario: The wide variant is a free-form escape hatch
   secondary/primary pair
 ```
 
+### Placement
+
+```gherkin
+Scenario: The popup is top-aligned by default
+  Given a Dialog with no verticalAlign (or verticalAlign = "top")
+  When it opens
+  Then the popup's top edge sits 48px below the top of the viewport
+  And it stays horizontally centered
+  And it keeps its content height (still capped at 100dvh - 96px)
+```
+
+```gherkin
+Scenario: verticalAlign = "center" opts into vertical centering
+  Given a Dialog with verticalAlign = "center"
+  When it opens
+  Then the popup is centered vertically in the viewport
+  And it stays horizontally centered
+```
+
+```gherkin
+Scenario: A narrow viewport keeps the popup's 48px edge margin
+  Given a viewport narrower than the Dialog's 256px minimum width plus 96px
+  When the Dialog opens
+  Then its minimum width shrinks to the available viewport width minus 96px
+  And the popup keeps at least 48px between each horizontal edge and viewport edge
+```
+
 ### Body slot
 
 ```gherkin
@@ -251,6 +336,16 @@ Scenario: Children override the canned body
   And the header title and footer buttons are unchanged
 ```
 
+```gherkin
+Scenario: bodyClassName styles the body wrapper independently of the popup
+  Given an open Dialog with a fixed popup height
+  And bodyClassName sets flex-1, min-h-0, zero padding, and start alignment
+  When it opens
+  Then those classes apply to the body wrapper while className stays on the popup
+  And the body fills the space between the header and footer
+  And the caller can give its body panes independent overflow behavior
+```
+
 ### Object name interpolation
 
 ```gherkin

package/dist/llms/dropdown-menu.md

@@ -35,6 +35,9 @@ token tier from `@acronis-platform/tokens-pd`.
 
 - A compact list of **actions** triggered from a `ButtonMenu` (row actions,
   account menu, "more" overflow).
+- The menu is non-modal by default, so the rest of the page remains scrollable
+  and interactive. Set `modal` to `true` when the page should be blocked while
+  the menu is open.
 
 ## When not to use
 
@@ -83,12 +86,40 @@ import {
 </DropdownMenu>;
 ```
 
+## Explain a disabled action
+
+Attach the tooltip trigger to the disabled menu item itself. The row stays the
+menu's single keyboard focus target, while pointer hover and menu focus can open
+the tooltip. Include the reason in the item's accessible name or description;
+the visual tooltip is supplemental.
+
+```tsx
+import {
+  DropdownMenuItem,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@acronis-platform/ui-react';
+
+<Tooltip>
+  <TooltipTrigger
+    aria-label="Export report is unavailable. Requires administrator access."
+    render={<DropdownMenuItem disabled>Export report</DropdownMenuItem>}
+  />
+  <TooltipContent>
+    Export report is unavailable. Requires administrator access.
+  </TooltipContent>
+</Tooltip>;
+```
+
 ## Props
 
 | Prop | Type | Default | Required | Description |
 |------|------|---------|----------|-------------|
 | `open` | `boolean` | — | no | Controlled open state. Pair with the change event. |
 | `default-open` | `boolean` | `false` | no | Initial open state when uncontrolled. |
+| `modal` | `boolean` | `false` | no | Whether opening the menu blocks interaction outside it and locks page scrolling. Defaults to non-modal behavior. |
+| `disabled` | `boolean` | `false` | no | On an item — prevents the action from running while preserving disabled menuitem semantics and keyboard focus. |
 | `side` | `'top' | 'bottom' | 'left' | 'right' | 'inline-start' | 'inline-end'` | `'bottom'` | no | On the content — which side of the trigger to render on. |
 | `align` | `'start' | 'center' | 'end'` | — | no | On the content — alignment along the chosen side. |
 | `side-offset` | `number` | `4` | no | On the content — distance in px from the trigger. |
@@ -113,6 +144,20 @@ state (or the consumer controls it via `open`).
 
 ### Opening & closing
 
+```gherkin
+Scenario: The menu is non-modal by default
+  Given a menu without an explicit modal setting
+  When the menu opens
+  Then page scrolling and interaction outside the menu remain available
+```
+
+```gherkin
+Scenario: Opting into modal behavior
+  Given a menu configured with modal=true
+  When the menu opens
+  Then page scrolling and interaction outside the menu are blocked
+```
+
 ```gherkin
 Scenario: Opening from the trigger
   Given a closed menu
@@ -141,7 +186,15 @@ Scenario: Roving navigation and typeahead
   Given an open menu
   When the user presses Arrow keys
   Then highlight moves between items (data-[highlighted])
-  And typing characters jumps to the matching item
+  And typing characters jumps to a matching item
+```
+
+```gherkin
+Scenario: Explaining a disabled action
+  Given an open menu with a disabled item and an explanatory tooltip
+  When the pointer hovers its tooltip trigger or keyboard focus reaches it
+  Then the tooltip opens
+  And the item remains disabled and its action does not run
 ```
 
 ### Submenus
@@ -165,6 +218,13 @@ roles, roving focus, typeahead, and dismissal.
 - Items are `role="menuitem"`. The shortcut hint is decorative text inside its
   item. Groups (`DropdownMenuGroup`) visually section items; non-first groups
   render a top-border separator.
+- Disabled items expose `aria-disabled="true"`, remain in keyboard menu
+  navigation, and cannot be activated.
+- To explain a disabled action, prefer attaching the tooltip trigger to the
+  disabled menu item itself. This keeps the menu item as the single keyboard
+  focus target instead of adding another interactive control inside a menu item.
+- A tooltip is supplemental visual information. Keep the disabled reason in the
+  trigger's accessible name or description as well.
 
 ## Keyboard
 
@@ -172,16 +232,21 @@ roles, roving focus, typeahead, and dismissal.
   to the first item.
 - **Arrow Up / Down** move the highlight (roving); **Home / End** jump to
   first / last; **typeahead** jumps to a matching item.
-- **Arrow Right** opens a submenu from its trigger; **Arrow Left** / **Escape**
+- **Arrow Right** opens a submenu from its trigger; **Arrow Left / Escape**
   closes it (Escape closes the whole menu from the root and returns focus to the
   trigger).
-- **Enter / Space** activates the highlighted item.
+- **Enter / Space** activates the highlighted enabled item. A disabled item
+  stays focusable but its action does not run.
+- If the tooltip trigger is the disabled menu item, keyboard navigation focuses
+  the trigger and opens the tooltip.
 - **Focus ring** (`--ui-focus-primary`, 3px inset) appears only on keyboard
   navigation (`focus-visible:not(:hover)`), not on pointer interaction.
 
 ## Screen reader
 
 - Opening announces the menu and its first item ("Profile, menu item 1 of 4").
+- The disabled reason is available in the menu item's accessible name or
+  description; the visual tooltip supplements that text.
 
 ## Contrast
 

package/dist/llms/page-header.md

@@ -43,15 +43,15 @@ a tags slot, an actions slot) and an optional description row, capped at
 
 ## Parts
 
-| Export                     | Element | Purpose                                                                                                                                                         |
-| -------------------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `PageHeader`               | `div`   | The banner region.                                                                                                                                              |
-| `PageHeaderRow`            | `div`   | Title row: title, optional edit button, tags, actions.                                                                                                          |
-| `PageHeaderTitle`          | `h1`    | The page title.                                                                                                                                                 |
-| `PageHeaderTags`           | `div`   | Optional tags slot (e.g. `Tag` chips). Collapses to the first tag + a "+#" tag (hover tooltip lists the hidden labels) when the full set doesn't fit.           |
-| `PageHeaderActions`        | `div`   | Trailing action buttons. Secondary-variant buttons collapse under a "More" `ButtonIcon` dropdown when the full set doesn't fit; primary buttons never collapse. |
-| `PageHeaderDescriptionRow` | `div`   | Optional description row (max 512px).                                                                                                                           |
-| `PageHeaderDescription`    | `p`     | Muted supporting text.                                                                                                                                          |
+| Export                     | Element         | Purpose                                                                                                                                                         |
+| -------------------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `PageHeader`               | `div`           | The `banner` landmark by default; accepts a native `role` override.                                                                                             |
+| `PageHeaderRow`            | `div`           | Title row: title, optional edit button, tags, actions.                                                                                                          |
+| `PageHeaderTitle`          | `h1` by default | The page title; use `as="h2"` for an embedded section under an existing page title.                                                                             |
+| `PageHeaderTags`           | `div`           | Optional tags slot (e.g. `Tag` chips). Collapses to the first tag + a "+#" tag (hover tooltip lists the hidden labels) when the full set doesn't fit.           |
+| `PageHeaderActions`        | `div`           | Trailing action buttons. Secondary-variant buttons collapse under a "More" `ButtonIcon` dropdown when the full set doesn't fit; primary buttons never collapse. |
+| `PageHeaderDescriptionRow` | `div`           | Optional description row (max 512px).                                                                                                                           |
+| `PageHeaderDescription`    | `p`             | Muted supporting text.                                                                                                                                          |
 
 ## Example
 
@@ -72,6 +72,33 @@ a tags slot, an actions slot) and an optional description row, capped at
 </PageHeader>
 ```
 
+## Page-level and embedded headers
+
+Keep both defaults for a page-level header: the root is a `banner` landmark and
+`PageHeaderTitle` renders as `<h1>`. For a header inside an existing page-level
+banner, set `role="none"` on the embedded root to avoid adding a second banner,
+and use `<h2>` for the embedded title. `role="none"` suppresses the extra
+landmark while the `<h2>` remains a heading. Choose the heading level from the
+surrounding document hierarchy; both levels keep the same visual style.
+
+```tsx
+<>
+  <PageHeader>
+    <PageHeaderRow>
+      <PageHeaderTitle>Reports</PageHeaderTitle>
+    </PageHeaderRow>
+  </PageHeader>
+
+  <section>
+    <PageHeader role="none">
+      <PageHeaderRow>
+        <PageHeaderTitle as="h2">Recent reports</PageHeaderTitle>
+      </PageHeaderRow>
+    </PageHeader>
+  </section>
+</>
+```
+
 ### Editable title/description (full-page wizards)
 
 ```tsx
@@ -92,6 +119,13 @@ a tags slot, an actions slot) and an optional description row, capped at
 </div>
 ```
 
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `PageHeader.role` | `string` | `banner` | no | Native role override for the root div. PageHeader is a banner landmark by default. Set role="none" when composing an embedded PageHeader beneath an existing page-level banner to avoid adding a second banner landmark; this does not change the heading semantics of its contents. |
+| `PageHeaderTitle.as` | `'h1' | 'h2'` | `h1` | no | The heading element used for PageHeaderTitle. Use h1 for a page's primary title and h2 when the title is nested under an existing page title, such as an embedded view. Both levels share the same visual style. |
+
 ## Behavior
 
 ```gherkin
@@ -160,8 +194,31 @@ Scenario: Actions fit
 
 ## Accessibility
 
-- The region is a `banner` landmark and the title is an `<h1>` — one page title per
-  page; ensure it fits the document outline.
+- By default, the root is a `banner` landmark and the title renders as `<h1>`.
+  Keep these defaults for a page-level header. When composing an embedded view
+  beneath an existing page-level banner, set `role="none"` on its PageHeader root
+  to suppress the extra landmark, and set the title to `<h2>` to reflect the
+  surrounding document hierarchy. The role override does not remove the `<h2>`
+  heading semantics; both heading levels share the same visual style.
+
+  ```tsx
+  <>
+    <PageHeader>
+      <PageHeaderRow>
+        <PageHeaderTitle>Reports</PageHeaderTitle>
+      </PageHeaderRow>
+    </PageHeader>
+
+    <section>
+      <PageHeader role="none">
+        <PageHeaderRow>
+          <PageHeaderTitle as="h2">Recent reports</PageHeaderTitle>
+        </PageHeaderRow>
+      </PageHeader>
+    </section>
+  </>
+  ```
+
 - If a breadcrumb is composed above PageHeader, it's a separate `Breadcrumb` with
   its own `<nav aria-label="breadcrumb">` — not a PageHeader part, so it carries
   its own accessibility contract (see the Breadcrumb spec).

package/dist/llms/stepper-item.md

@@ -16,13 +16,13 @@ import { StepperItem } from '@acronis-platform/ui-react'
 <StepperItem
   variant="completed"
   label="Create an account"
-  avatar={<Avatar color="green"><CheckIcon size={16} /></Avatar>}
+  avatar={<Avatar color="green" className="[box-shadow:none]"><CheckIcon size={16} /></Avatar>}
   render={<button type="button" onClick={goToStep(1)} />}
 />
 <StepperItem
   variant="current"
   label="Choose a plan"
-  avatar={<Avatar color="blue"><AvatarFallback>2</AvatarFallback></Avatar>}
+  avatar={<Avatar color="blue" className="[box-shadow:none] text-[var(--ui-stepper-item-current-label-color)]"><AvatarFallback>2</AvatarFallback></Avatar>}
 />
 ```
 
@@ -105,10 +105,13 @@ two caveats the caller applies via `className`, both shown above:
   as an unwanted halo on `current`'s blue fill and on `completed`'s
   hover/active fills. See "Design status" below.
 
-Only six `variant` x `state` combinations exist in the design, and the
-component reproduces exactly that: `current` is always highlighted with a
-border, `future` is always disabled, and only `completed` reads `state`
-(`idle`, `hover`, `active`, `focus`).
+The label uses the Stepper typography treatment.
+
+The Figma component set draws three top-level `type` variants: `current`,
+`completed`, and `future`. The React API also has a four-value `state` prop, but
+only `completed` responds to it. Figma's nested Completed instance exposes only
+`idle`; the other completed states are token-backed implementation states, not
+drawn variant symbols.
 
 `current` is the only variant that paints a visible border, but every variant
 reserves the same border box (transparent on `completed` and `future`), so the
@@ -149,7 +152,7 @@ above (the same pattern `Timeline`'s marker already used).
 | `variant` | `'current' | 'completed' | 'future'` | `current` | no | The step's structural role in the sequence. `current` is where the user is and always renders highlighted with a border; `completed` is already passed and is the only variant whose look responds to `state`; `future` is not reachable yet and always renders disabled and non-interactive. Defaults to `current` for prop ergonomics — in a real sequence every step declares its own. |
 | `state` | `'idle' | 'hover' | 'active' | 'focus'` | `idle` | no | The interaction look. Only observable when `variant` is `completed` (`idle`, `hover`, and `active` each paint their own fill token — `idle`'s resolves to `transparent` in the shipped brands, so it reads as no fill; `focus` draws a 3px ring — its token is byte-identical to `--ui-focus-primary`, i.e. the same look `focus-visible` already draws automatically on a composed control). Ignored for `current`, which is always highlighted, and for `future`, which is always disabled. It is a declarative prop, not a CSS pseudo-state, because the design models it as distinct token roles and a consumer may need to force it. |
 | `avatar` | `Element` | — | yes | The step's marker — an avatar element supplied and styled entirely by the caller (color scheme, initials / icon / image, size overrides). The step renders it verbatim and never restyles it. |
-| `label` | `ReactNode` | — | no | The step name. Truncates rather than wrapping. |
+| `label` | `ReactNode` | — | no | The step name. Truncates rather than wrapping and uses the Stepper typography treatment. |
 | `render` | `RenderProp` | — | no | Base UI composition prop — replaces the rendered `<div>` with another element or component while merging props and classes. Use it to make a completed step a real `<button>` (or a router link) that jumps back. React-only; other frameworks use their own polymorphism. |
 
 ## Events

package/dist/llms.txt

@@ -1,6 +1,6 @@
 # Acronis UI Kit for React — LLM Reference
 
-> `@acronis-platform/ui-react` v5.5.9
+> `@acronis-platform/ui-react` v7.0.0
 
 Machine-readable component reference compiled from framework-agnostic specs.
 Each entry links to a self-contained markdown file with props, behavior,
@@ -34,8 +34,8 @@ accessibility notes, and usage examples.
 - [CardWidgetCarousel](./llms/card-widget-carousel.md): A horizontal scroll carousel that holds a row of action-widget cards and exposes floating Previous/Next chevron buttons to navigate the view. The carousel shell manages scroll; the individual cards are passed as `children`. Ships with a companion `CardWidget` component (same barrel) — a status-colored card with icon box, optional skeleton, and footer slot.
 - [CategoryBar](./llms/category-bar.md): A single horizontal bar split into proportional colored segments — one part-to-whole across a handful of categories in one row (onboarding stages, certification status, a pass/fail split). Each segment's width is its value over the sum of all values; segment colors are caller-supplied via `config`. A plain flex composition (not a recharts chart) with one CVA axis (`size`), an optional count/% legend, and per-segment hover tooltips. Design-pending v1 — no chart token tier exists yet.
 - [Chart](./llms/chart.md): A theming layer over recharts — a `ChartContainer` that supplies series colors and recharts class overrides, plus tooltip and legend chrome (`ChartTooltipContent`, `ChartLegendContent`). The chart type (bar / line / area / pie / …) is composed from recharts primitives by the caller. Ported from the legacy shadcn-uikit `chart`.
-- [ChartState](./llms/chart-state.md): A shared loading / empty / error placeholder for the chart types, rendered in place of the chart inside the same sized slot. A compact status block — a leading glyph over a centered label, with an optional retry action for the error state. The `empty` state draws the silhouette the design defines for each chart type (`variant`), plus an optional "Widget description" line; `loading` and `error` share one treatment. Distinct from `WidgetPlaceholder`, which is the composable skeleton for a widget that isn't a chart — see behavior.md.
-- [ChartWidget](./llms/chart-widget.md): The dashboard card a chart sits in: a `Card` with the standard widget header (title, optional filter chip and the ⋯ actions menu) and an optional metric readout above the plot. Adds the one thing a `Card` doesn't know about — the body's loading / empty / error placeholder — and re-implements nothing else: its `header` is `CardHeaderProps`, spread. It declares no size: the grid sizes the card and the widget passes that height down, so a `size-full` chart fills whatever the header leaves. The per-type chart components stay card-less, so a chart is still usable outside a widget.
+- [ChartState](./llms/chart-state.md): Shared loading / empty / warning / error / number visuals for a chart slot. Empty, warning, and error use the Breakpoints visual treatment: a 64px status circle with a 24px glyph and centered message. Number shows a centered KPI value; loading uses the shared spinner. Consumers select the state and may localize its content through `description`. Distinct from `WidgetPlaceholder`, which is the composable skeleton for a non-chart widget.
+- [ChartWidget](./llms/chart-widget.md): The dashboard card a chart sits in: a `Card` with the standard widget header (title, optional filter chip and the ⋯ actions menu) and an optional metric readout above the plot. Adds the one thing a `Card` doesn't know about — the body's loading / empty / warning / error / number state — and re-implements nothing else. The consumer selects the state explicitly; the widget does not infer it from chart data. its `header` is `CardHeaderProps`, spread. It declares no size: the grid sizes the card and the widget passes that height down, so a `size-full` chart fills whatever the header leaves. The per-type chart components stay card-less, so a chart is still usable outside a widget.
 - [Chip](./llms/chip.md): A compact, interactive label for a selection, a removable token, or an inline action. The `removable` variant carries a trailing × button; `selectable` is a toggle that shows an active style when selected; `operational` is a plain action chip with a strong-link label. All three accept an optional leading icon.
 - [ComposedChart](./llms/composed-chart.md): A typed composed (mixed) chart over the shared `Chart` primitives. Plots a `series` list over one shared category axis, where each entry picks its own render `type` (bar / line / area), inside a `ChartContainer` with tooltip and legend chrome. No variant axes — the mix is data-driven via `series[].type`. Series render in the caller's `series` order (later entries paint on top). Ported from the apps/demo `ComposedChartPlayground`.
 - [ConfidenceCone](./llms/confidence-cone.md): A forecast confidence-cone over the shared `Chart` primitives: a solid line for the known/actual period, a dashed line for the forecast, and a shaded band (the "cone") between a lower and upper bound that typically widens with the horizon, visualizing growing uncertainty. Distinct from the conversion `FunnelChart`. Design-pending v1 (no `--ui-chart-*` palette, no `apps/demo` playground — built net-new).
@@ -137,7 +137,7 @@ accessibility notes, and usage examples.
 
 ## Overlays
 
-- [Dialog](./llms/dialog.md): A higher-level "recipe" dialog built on top of the DialogRoot primitive parts. A single `variant` prop selects one of seven canned use-cases (default, rename, save changes, reset password, discard changes, accept, read-only) — each with its own title, body copy and footer buttons — plus a legacy `wide` escape hatch (no Figma preset, free-form footer via the `footer` prop) kept for backward compatibility with pre-Figma call sites. `children` overrides the body slot and `hasLoading` shows a `Loading` overlay. Colors, typography, and container/header/footer geometry resolve to the `--ui-dialog-*`/`--ui-footer-*` token tier (see tokens.yaml). In Figma the matching component set is named "DialogDefault"; the code-facing name is `Dialog`.
+- [Dialog](./llms/dialog.md): A higher-level "recipe" dialog built on top of the DialogRoot primitive parts. A single `variant` prop selects one of seven canned use-cases (default, rename, save changes, reset password, discard changes, accept, read-only) — each with its own title, body copy and footer buttons — plus a legacy `wide` escape hatch (no Figma preset, free-form footer via the `footer` prop) kept for backward compatibility with pre-Figma call sites. `children` overrides the body slot, `bodyClassName` styles its wrapper, and `hasLoading` shows a `Loading` overlay. The popup is top-aligned 48px from the viewport edge by default; `verticalAlign="center"` opts into vertical centering. Colors, typography, and container/header/footer geometry resolve to the `--ui-dialog-*`/`--ui-footer-*` token tier (see tokens.yaml). In Figma the matching component set is named "DialogDefault"; the code-facing name is `Dialog`.
 - [DialogRoot](./llms/dialog-root.md): A modal overlay that interrupts the user to show focused content or request a decision. A set of composable parts (trigger, overlay, content, header, title, close, body, description, footer) built on the Base UI Dialog primitive. Initial version ported from the legacy shadcn-uikit `Dialog`; design reconciliation against Figma is pending. Internal-only as of the Dialog (recipe) merge — not exported from the package root. `Dialog` (sourceDir: dialog, see the `dialog` spec) is the sole public entry point; it composes these parts internally.
 - [DropdownMenu](./llms/dropdown-menu.md): A menu of actions anchored to a trigger (typically a `ButtonMenu`), opened on demand. Composable parts — trigger, content, group (section), item, shortcut, submenu — built on the Base UI Menu primitive. Themed by the `--ui-button-menu-dropdown-*` token tier from @acronis-platform/tokens-pd.
 - [Popover](./llms/popover.md): A floating panel anchored to a trigger, shown on demand for secondary content or quick actions. Built on the Base UI Popover primitive (positioning, focus management, outside-press / Esc dismissal). Ported from the legacy shadcn-uikit `Popover`; container chrome themed by the `--ui-popover-*` tier, with optional `PopoverBody`/`PopoverFooter` parts for the body-rhythm and default action-row recipe shown in Figma.