@acronis-platform/ui-react 6.0.0 → 7.0.0

package/dist/llms/data-table.md

@@ -72,10 +72,12 @@ from it too (see **Server-driven usage** below).
 - **Infinite scroll** — set `paginationMode="infinite"` and pass the full
   accumulated `data`, `hasNextPage`, `isLoadingMore`, and an `onLoadMore`
   callback. DataTable renders a sentinel row that calls `onLoadMore` once it
-  scrolls into view, and a trailing loading row while `isLoadingMore` is true.
-  The sentinel needs at least one row already rendered — it can't drive an
-  empty table's very first fetch, so seed the first page yourself (e.g. on
-  mount). Pass `loadMoreRootMargin` (e.g. `'400px'`) to fire `onLoadMore`
+  scrolls into view. While `isLoadingMore` is true, it hides the sentinel and
+  shows a centered status row with "Loading more data..."; override
+  `loadingMoreLabel` to localize it. Loaded rows stay visible. The `skeleton`
+  prop remains the initial-load treatment. The sentinel needs at least one row
+  already rendered — it can't drive an empty table's very first fetch, so seed
+  the first page yourself (e.g. on mount). Pass `loadMoreRootMargin` (e.g. `'400px'`) to fire `onLoadMore`
   before the sentinel is literally visible, so the fetch has a head start on
   the user's scroll — tune it relative to your page size, since a large
   margin with small pages can trigger several `onLoadMore` calls back-to-back
@@ -153,13 +155,13 @@ as `children` of the toolbar for per-column filtering.
 | `expand-label` | `string` | `'Expand row'` | no | On the expand-trigger part — accessible name while the row is collapsed. Override to localize. |
 | `collapse-label` | `string` | `'Collapse row'` | no | On the expand-trigger part — accessible name while the row is expanded. Override to localize. |
 | `sort-label` | `(title: string) => string` | `(title) => `Sort by ${title}`` | no | On the column-header part — builds the accessible label of the sort toggle from the column title. Override to localize. |
-| `table` | `Table<TData>` | — | no | Render from an externally-built TanStack `table` instance instead of DataTable's own — DataTable then owns no state. Makes the following no-ops (configure the equivalent on the external instance instead): columnVisibility, onColumnVisibilityChange, onColumnSizingChange, enableColumnResizing, getRowCanExpand, manualSorting, sorting, onSortingChange, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, isLoadingMore. meta.pin-driven column pinning is also skipped — pin/unpin the external instance directly via TanStack's `column.pin()`. |
+| `table` | `Table<TData>` | — | no | Render from an externally-built TanStack `table` instance instead of DataTable's own — DataTable then owns no state. Makes the following no-ops (configure the equivalent on the external instance instead): columnVisibility, onColumnVisibilityChange, onColumnSizingChange, enableColumnResizing, getRowCanExpand, manualSorting, sorting, onSortingChange, paginationMode, onLoadMore, loadMoreRootMargin, hasNextPage, isLoadingMore, loadingMoreLabel. meta.pin-driven column pinning is also skipped — pin/unpin the external instance directly via TanStack's `column.pin()`. |
 | `getRowCanExpand` | `(row: Row<TData>) => boolean` | — | no | Enables row expansion for rows that return true. Pair with renderExpandedRow. |
 | `renderExpandedRow` | `(row: Row<TData>) => ReactNode` | — | no | Renders the detail content for an expanded row. |
 | `striped` | `boolean` | `false` | no | Alternating row backgrounds (borrowed from the Vue AvTable). |
 | `bordered` | `boolean` | `false` | no | Vertical borders between columns (rows already have horizontal borders). |
 | `highlightCurrentRow` | `boolean` | `false` | no | Highlight the row the user last clicked (the "current" row). |
-| `skeleton` | `boolean` | `false` | no | Render placeholder skeleton rows instead of data (loading state). |
+| `skeleton` | `boolean` | `false` | no | Render shared Skeleton placeholders for initial loading, replacing the data rows while keeping the header visible. |
 | `skeletonRows` | `number` | `5` | no | Number of skeleton rows when skeleton is set. |
 | `enableColumnResizing` | `boolean` | `false` | no | Opt in to interactive column resizing — renders a drag handle at the trailing edge of each resizable header (TanStack's native `columnResizing`, `columnResizeMode: 'onChange'`). |
 | `enableColumnReordering` | `boolean` | `false` | no | Opt in to column reordering by dragging a header cell onto another one (native HTML5 drag-and-drop driving TanStack's `columnOrder`; the dragged header dims while the gesture is in flight). Pinned columns are excluded — they're anchored to a table edge by definition. Pointer-only: there is no keyboard equivalent yet. No-op when `table` is passed. |
@@ -188,9 +190,10 @@ as `children` of the toolbar for per-column filtering.
 | `renderRow` | `(row: Row<TData>, rowIndex: number) => ReactNode` | — | no | Renders a full row, bypassing DataTable's default per-cell `flexRender` path entirely. Use to swap in a custom, independently memoizable row component — the caller owns the row's markup and equality semantics. Reuse the exported `getCellStyle` / `getPinnedStyle` / `getColumnWidth` helpers to match DataTable's default cell styling if desired. Also bypasses `renderExpandedRow` — a row rendered via `renderRow` never gets an expanded-content row appended; read `row.getIsExpanded()` and render it yourself if needed. |
 | `renderEmptyState` | `(context: { hasFilters: boolean }) => ReactNode` | — | no | Renders a custom empty state instead of the default "No results." row. Receives `hasFilters` (whether any column filter is currently applied) so the caller can distinguish "no data at all" from "no matches" — the copy/wording/localization stays the caller's job. |
 | `paginationMode` | `'page' | 'infinite'` | `'page'` | no | `'page'` keeps today's client-paginated behavior. `'infinite'` omits the paginated row model — `data` is the full accumulated array the caller appends to on each `onLoadMore` — and renders a sentinel row that calls `onLoadMore` once it scrolls into view. The sentinel requires at least one row already rendered, so it cannot drive an empty table's very first fetch — seed the first page yourself (e.g. on mount) and use `onLoadMore` for subsequent pages. No-op when `table` is passed. Does not compose with virtualization; for a large accumulated list, virtualize the raw `Table` primitives yourself instead. |
-| `loadMoreRootMargin` | `string` | — | no | Expands the sentinel's `IntersectionObserver` root margin (native CSS margin syntax, e.g. "400px") so `onLoadMore` fires before the sentinel is literally visible, reducing how often the trailing loading row is seen. `paginationMode="infinite"` only; no-op when `table` is passed. How far this actually prefetches also depends on page size — a large margin with small pages can trigger several `onLoadMore` calls back-to-back as the user scrolls normally, which is expected; tune it relative to page size. |
+| `loadMoreRootMargin` | `string` | — | no | Expands the sentinel's `IntersectionObserver` root margin (native CSS margin syntax, e.g. "400px") so `onLoadMore` fires before the sentinel is literally visible, reducing how often the trailing loading status row is seen. `paginationMode="infinite"` only; no-op when `table` is passed. How far this actually prefetches also depends on page size — a large margin with small pages can trigger several `onLoadMore` calls back-to-back as the user scrolls normally, which is expected; tune it relative to page size. |
 | `hasNextPage` | `boolean` | `false` | no | Whether more rows are available to load. `paginationMode="infinite"` only. |
-| `isLoadingMore` | `boolean` | `false` | no | Whether a load is in flight — suppresses further `onLoadMore` calls and renders a trailing loading row. `paginationMode="infinite"` only. |
+| `isLoadingMore` | `boolean` | `false` | no | Whether a load is in flight — suppresses further `onLoadMore` calls and renders a centered status row with `loadingMoreLabel`. The observer sentinel is omitted while loading. `paginationMode="infinite"` only; no-op when `table` is passed. |
+| `loadingMoreLabel` | `string` | `'Loading more data...'` | no | Visible text in the infinite-scroll loading status row. Override to localize. `paginationMode="infinite"` only; no-op when `table` is passed. |
 
 ## Events
 
@@ -264,12 +267,18 @@ Scenario: Custom row rendering
 Scenario: Infinite scroll
   Given paginationMode="infinite" and hasNextPage is true
   And at least one row is already rendered
-  Then a sentinel row renders as the last row of the body
+  And isLoadingMore is false
+  Then an aria-hidden sentinel row renders after the loaded rows
   When the sentinel scrolls into view and isLoadingMore is false
   Then onLoadMore fires
   And no further onLoadMore calls fire while isLoadingMore is true
   When isLoadingMore is true
-  Then a trailing loading row renders below the sentinel
+  Then the sentinel is omitted
+  And a centered status row renders after the loaded rows
+  And the status row shows loadingMoreLabel (default "Loading more data...")
+  And the status row carries role="status" and aria-live="polite"
+  When isLoadingMore becomes false and hasNextPage is still true
+  Then the sentinel renders again
 ```
 
 ```gherkin
@@ -509,10 +518,11 @@ Scenario: Selection counts under an active filter — two deliberate scopes
   renders no tooltip.
 - Per-column filter fields live in a keyboard-navigable `FilterSearchFilters`
   popover; each applied-filter chip below the toolbar removes its own filter.
-- The infinite-scroll loading row (`paginationMode="infinite"`, `isLoadingMore`)
-  carries `role="status"`/`aria-live="polite"` with an `sr-only` "Loading more
-  rows…" text, so a screen-reader user is told a fetch is in flight without
-  having to notice the animated placeholder.
+- The infinite-scroll loading status row (`paginationMode="infinite"`,
+  `isLoadingMore`) visibly shows `loadingMoreLabel` (default "Loading more
+  data...") and carries `role="status"`/`aria-live="polite"`. Override
+  `loadingMoreLabel` to localize the message. The observer sentinel is omitted
+  while this status row is shown.
 
 ## Known limitations
 

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 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 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,8 +197,8 @@ import { Dialog } from '@acronis-platform/ui-react';
   <p>Body-only content — no title bar, no close button.</p>
 </Dialog>;
 
-// Pin the popup 48px from the top of the viewport instead of centering it
-<Dialog variant="default" verticalAlign="top" open>
+// Opt into vertical centering when a flow calls for it
+<Dialog variant="default" verticalAlign="center" open>
   <p>Any custom body content.</p>
 </Dialog>;
 
@@ -179,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. |
@@ -190,7 +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'` | `'center'` | no | Vertical placement of the popup (forwarded to the underlying content). `center` (the default) centers it in the viewport; `top` pins it 48px from the top edge of the viewport instead, keeping its content height. A ui-react-only extension beyond the Figma contract, like `size="large"`. |
+| `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). |
 
@@ -250,20 +302,28 @@ Scenario: The wide variant is a free-form escape hatch
 ### Placement
 
 ```gherkin
-Scenario: The popup is centered by default
-  Given a Dialog with no verticalAlign (or verticalAlign = "center")
+Scenario: The popup is top-aligned by default
+  Given a Dialog with no verticalAlign (or verticalAlign = "top")
   When it opens
-  Then the popup is centered in the viewport, horizontally and vertically
+  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 = "top" pins the popup near the top edge
-  Given a Dialog with verticalAlign = "top"
+Scenario: verticalAlign = "center" opts into vertical centering
+  Given a Dialog with verticalAlign = "center"
   When it opens
-  Then the popup's top edge sits 48px below the top of the viewport
+  Then the popup is centered vertically in the viewport
   And it stays horizontally centered
-  And it keeps its content height (still capped at 100dvh - 96px), leaving
-  the viewport below it empty
+```
+
+```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
@@ -276,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` v6.0.0
+> `@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,
@@ -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.