@acronis-platform/ui-react 2.0.0 → 4.0.0

package/dist/llms/empty-overlay.md

@@ -0,0 +1,146 @@
+# EmptyOverlay
+
+> A full-bleed empty-state overlay — a colored icon badge over a centered title/description, on a fade-to-solid backdrop. Meant to sit over other content (e.g. a frozen/blurred widget preview); the developer sizes it (typically `absolute inset-0` over a positioned parent).
+
+**Status:** ready · **Category:** data-display · **Since:** v2.1.0
+
+## Import
+
+```tsx
+import { EmptyOverlay } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<div className="relative h-96">
+  <EmptyOverlay
+    icon={<InboxIcon />}
+    title="No object yet"
+    description="Short description."
+  />
+</div>
+```
+
+A full-bleed empty-state overlay: a colored icon badge over a centered
+title/description, on a fade-to-solid backdrop.
+
+## When to use
+
+- Overlay a "no data yet" message on top of other content — e.g. a
+  frozen/blurred widget preview behind the message.
+- As a standalone empty state that should fill its container edge-to-edge.
+
+## When not to use
+
+- For a plain, non-overlay empty state with no background treatment — use
+  `Empty`'s composable parts instead.
+- For a bordered dashboard-widget card with a header/footer — use
+  `WidgetPlaceholder`.
+
+## Sizing
+
+`EmptyOverlay` always fills its parent (`size-full`) — the developer is
+responsible for sizing and positioning the parent, typically
+`relative` + `absolute inset-0`.
+
+## Examples
+
+```tsx
+import { EmptyOverlay } from '@acronis-platform/ui-react';
+import { InboxIcon } from '@acronis-platform/icons-react/stroke-mono';
+
+<div className="relative h-96">
+  <EmptyOverlay
+    icon={<InboxIcon />}
+    title="No object yet"
+    description="Short description."
+  />
+</div>;
+```
+
+## Parts
+
+| Part          | Element | Purpose                                      |
+| ------------- | ------- | -------------------------------------------- |
+| root          | `div`   | Fills the parent; fade-to-solid backdrop.    |
+| `icon`        | `div`   | Optional 24px glyph in a 64px colored badge. |
+| `title`       | `h3`    | The empty-state headline.                    |
+| `description` | `p`     | Optional supporting copy under the title.    |
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `icon` | `ReactNode` | — | no | Icon rendered in the colored badge (e.g. an `icons-react` glyph at 24px). Omitting it omits the badge entirely. |
+| `title` | `ReactNode` | — | yes | The empty-state headline, rendered as an `<h3>`. |
+| `description` | `ReactNode` | — | no | Optional supporting copy shown under the title. |
+| `color` | `'teal' | 'violet' | 'red' | 'yellow' | 'orange' | 'blue' | 'gray' | 'green'` | `green` | no | Icon badge color scheme, from the shared avatar palette. Maps to `--ui-avatar-color-<scheme>` (badge fill) and `--ui-avatar-label-color-<scheme>` (icon color). |
+
+## Behavior
+
+### Fills its container
+
+**Given** an `EmptyOverlay`
+**When** it renders
+**Then** it fills the width and height of its parent (`size-full`) and centers
+its content — the developer is responsible for sizing/positioning the parent
+(e.g. `relative` + `absolute inset-0` to overlay other content).
+
+### Icon badge
+
+**Given** an `icon`
+**When** it renders
+**Then** a 64px circular badge shows above the title, holding the icon at
+24px; the badge's fill/icon color come from the `color` prop (default
+`green`).
+**Given** no `icon`
+**Then** the badge is omitted entirely — only the title/description center.
+
+### Color
+
+**Given** `color` set to one of the eight avatar palette values (`teal`,
+`violet`, `red`, `yellow`, `orange`, `blue`, `gray`, `green`)
+**When** it renders
+**Then** the badge's fill and icon color resolve from that color's
+`--ui-avatar-color-<color>` / `--ui-avatar-label-color-<color>` tokens
+**And** with no `color` it defaults to `green`.
+
+### Title / description
+
+**Given** a `title`
+**When** it renders
+**Then** it shows as an `<h3>` headline below the badge.
+**Given** a `description`
+**When** it renders
+**Then** it shows as supporting copy below the title.
+**Given** no `description`
+**Then** only the title renders.
+
+### Non-interactive
+
+**Given** an `EmptyOverlay`
+**When** the user hovers or clicks it
+**Then** nothing happens — it is a presentational placeholder, not a control.
+
+## Accessibility
+
+## Semantics
+
+- The root is a plain, non-interactive `<div>` — no role, not a live region.
+  If the overlay replaces content that a screen reader user was tracking
+  (e.g. it appears after a failed load), the consumer is responsible for any
+  live-region announcement at the point where the overlay is mounted.
+- `title` renders as an `<h3>`, so it participates in the page's heading
+  outline — pick a container level that keeps that hierarchy sensible.
+- The icon badge is decorative (the title/description already carry the
+  meaning); it needs no accessible name of its own.
+
+## Keyboard & focus
+
+- Not focusable and not in the tab order — there is nothing to activate.
+
+## Contrast
+
+- Each badge color's fill/icon pair, and the title/description text colors,
+  resolve from tokens that meet contrast in both light and dark themes.

package/dist/llms/empty.md

@@ -0,0 +1,156 @@
+# Empty
+
+> A centered empty-state placeholder shown when there is no data or content. A set of composable parts (icon, header, title, description, actions, links). Ported from the legacy shadcn-uikit `Empty`; themed by the shared semantic text tokens.
+
+**Status:** draft · **Category:** data-display · **Since:** v0.13.0
+
+## Import
+
+```tsx
+import { Empty, EmptyIcon, EmptyHeader, EmptyTitle, EmptyDescription, EmptyActions, EmptyLinks } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<Empty>
+  <EmptyIcon>
+    <InboxIcon />
+  </EmptyIcon>
+  <EmptyHeader>
+    <EmptyTitle>No backups found</EmptyTitle>
+    <EmptyDescription>Create your first backup plan.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyActions>
+    <Button>Create backup plan</Button>
+  </EmptyActions>
+</Empty>
+```
+
+A centered empty-state placeholder shown when there is no data or content.
+Composable from parts; no variants.
+
+> **Status: draft (design-pending v1).** Ported from the legacy
+> `@acronis-platform/shadcn-uikit` `Empty`. No `--ui-empty-*` token tier yet, so
+> it themes from the shared semantic text tokens (title `text-foreground`,
+> description/icon `text-muted-foreground`). Reconcile with
+> `/figma-component Empty <url> --update` once a mockup lands.
+
+## When to use
+
+- A list, table, or panel that has no items yet (or none match a filter).
+- A first-run state inviting the user to create the first item.
+
+## When not to use
+
+- For a loading state — use a spinner/skeleton, not Empty.
+- For an error state — show an error with a retry, not a neutral empty.
+- For a blocking message — use a Dialog.
+
+## Parts
+
+| Part               | Element | Purpose                                |
+| ------------------ | ------- | -------------------------------------- |
+| `Empty`            | `div`   | Centered container (max 448px), muted. |
+| `EmptyIcon`        | `div`   | Optional 72px illustration/glyph slot. |
+| `EmptyHeader`      | `div`   | Groups the title + description.        |
+| `EmptyTitle`       | `h3`    | The heading (foreground color).        |
+| `EmptyDescription` | `p`     | Supporting copy (muted).               |
+| `EmptyActions`     | `div`   | Primary action(s), e.g. a Button.      |
+| `EmptyLinks`       | `div`   | Secondary supporting link(s).          |
+
+## Example
+
+```tsx
+import {
+  Empty,
+  EmptyIcon,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyActions,
+  Button,
+} from '@acronis-platform/ui-react';
+import { InboxIcon } from '@acronis-platform/icons-react/stroke-mono';
+
+<Empty>
+  <EmptyIcon>
+    <InboxIcon />
+  </EmptyIcon>
+  <EmptyHeader>
+    <EmptyTitle>No backups found</EmptyTitle>
+    <EmptyDescription>Create your first backup plan.</EmptyDescription>
+  </EmptyHeader>
+  <EmptyActions>
+    <Button>Create backup plan</Button>
+  </EmptyActions>
+</Empty>;
+```
+
+## Content slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | The composed empty state. Author it from the parts: an optional icon, a header (title + description), and optional actions / links. All parts are optional and may be combined as needed. |
+
+## Behavior
+
+Empty is a presentational placeholder assembled from composable parts. It has no
+props, no variants, and no interaction state — it is a pure function of its
+composition.
+
+### Composition
+
+```gherkin
+Scenario: A full empty state
+  Given an Empty wrapping an EmptyIcon, an EmptyHeader (EmptyTitle +
+        EmptyDescription), and EmptyActions
+  When it renders
+  Then the icon, title, description, and actions stack centered in source order
+```
+
+```gherkin
+Scenario: Parts are optional
+  Given an Empty wrapping only an EmptyHeader with an EmptyTitle
+  When it renders
+  Then just the title shows, centered — no icon or actions space is reserved
+```
+
+### Usage
+
+```gherkin
+Scenario: Filling a region
+  Given a list or table with no rows
+  When the consumer renders an Empty in its place
+  Then the empty state is centered within that region (the consumer sizes it)
+```
+
+## Accessibility
+
+Empty is presentational; accessibility is mostly about the heading and the icon.
+
+## Roles & semantics
+
+- `EmptyTitle` renders an `<h3>`. Make sure that level fits the surrounding
+  document outline — if the empty state replaces a section whose heading was a
+  different level, set the heading appropriately (override via `className`/markup
+  as needed). Don't skip levels.
+- `EmptyDescription` is a `<p>` associated with the title by proximity.
+- The `EmptyIcon` is decorative — mark its SVG `aria-hidden="true"` so it isn't
+  announced (the title carries the meaning).
+- When the empty state appears **in response to an async action** (e.g. a search
+  returned nothing, or data finished loading empty), wrap it (or a status region)
+  with `role="status"` / `aria-live="polite"` so screen-reader users are told the
+  result. Empty itself does not impose a role.
+
+## Keyboard
+
+- Empty has no interactive behavior. Any controls placed in `EmptyActions` /
+  `EmptyLinks` (Buttons, Links) keep their own focus and keyboard behavior.
+
+## Contrast
+
+- The title uses `--ui-text-on-surface-primary`; the description and icon use
+  `--ui-text-on-surface-secondary` — both meet WCAG AA against the page surface in
+  light and dark. Re-verify against the final palette once a `--ui-empty-*` tier
+  and Figma reference exist.

package/dist/llms/field.md

@@ -0,0 +1,185 @@
+# Field
+
+> A form-field wrapper that ties a control to its label, description, and error, built on Base UI's Field primitive so those associations (and the validity state) are wired automatically. Ships structural parts (fieldset, legend, group, content, separator) for composing and grouping fields. Ported from the legacy shadcn-uikit `field`.
+
+**Status:** draft · **Category:** forms · **Since:** v0.47.0
+
+## Import
+
+```tsx
+import { Field, FieldLabel, FieldControl, FieldDescription, FieldError } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<Field>
+  <FieldLabel>Email</FieldLabel>
+  <FieldControl render={<InputBox />} />
+  <FieldDescription>We'll never share it.</FieldDescription>
+</Field>
+```
+
+A form-field wrapper that ties a control to its label, description, and error.
+Built on Base UI's Field primitive, so the `for` / `id` / `aria-describedby` /
+`aria-invalid` associations and the validity state are wired automatically — no
+manual plumbing. Structural parts (`FieldSet`, `FieldLegend`, `FieldGroup`,
+`FieldContent`, `FieldSeparator`) compose and group fields.
+
+> **Design-pending v1**, ported from the legacy shadcn-uikit `field` and rebuilt
+> on Base UI Field. Reconcile with Figma later.
+
+## When to use
+
+- Labelling a **bare** control with a description and/or validation error — the
+  primary case is a text field via `FieldControl render={<InputBox />}`.
+- Grouping related controls under a heading (`FieldSet` + `FieldLegend`).
+
+## When not to use
+
+- A standalone text field with built-in furniture — use `InputText` /
+  `InputSearch` / `InputSelect`, which already include label/description/error.
+- Naming a single `Checkbox` / `Switch` — they self-label via their own `label`
+  prop. Use `Field`/`FieldSet` only to **group** them.
+
+## Parts
+
+| Export             | Purpose                                                                           |
+| ------------------ | --------------------------------------------------------------------------------- |
+| `Field`            | The field wrapper (Base UI Field.Root). `orientation` lays out label vs. control. |
+| `FieldLabel`       | The caption — auto-associated with the control.                                   |
+| `FieldControl`     | Wires a bare control; use its `render` prop (e.g. `render={<InputBox />}`).       |
+| `FieldDescription` | Helper text — auto-linked via `aria-describedby`.                                 |
+| `FieldError`       | Validation message — shown by validity, or forced with `match`.                   |
+| `FieldContent`     | Stacks a label + description beside a control (e.g. a toggle row).                |
+| `FieldTitle`       | A non-label heading for a field with no single associated control.                |
+| `FieldSet`         | Native `<fieldset>` grouping related fields.                                      |
+| `FieldLegend`      | The fieldset heading — `legend` (large) or `label` (small) `variant`.             |
+| `FieldGroup`       | A vertical stack of fields / nested groups (container-query context).             |
+| `FieldSeparator`   | A divider between fields, with an optional centered label.                        |
+
+> `FieldLabel` / `FieldControl` / `FieldDescription` / `FieldError` are Base UI
+> Field parts — they must be rendered **inside a `Field`** (they throw without the
+> Field context). For a group-level heading use `FieldLegend` in a `FieldSet`.
+
+## Example
+
+```tsx
+import {
+  Field,
+  FieldLabel,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  InputBox,
+} from '@acronis-platform/ui-react';
+
+<Field invalid={hasError}>
+  <FieldLabel>Email</FieldLabel>
+  <FieldControl render={<InputBox type="email" />} />
+  <FieldDescription>We'll never share your email.</FieldDescription>
+  <FieldError match>Please enter a valid email address.</FieldError>
+</Field>;
+```
+
+Group self-labeling controls:
+
+```tsx
+<FieldSet>
+  <FieldLegend>Notifications</FieldLegend>
+  <FieldGroup>
+    <Checkbox label="Product updates" />
+    <Checkbox label="Security alerts" />
+  </FieldGroup>
+</FieldSet>
+```
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `orientation` | `'vertical' | 'horizontal' | 'responsive'` | `'vertical'` | no | Label/control layout — stacked, inline, or stacked-then-inline at the @md container width. |
+| `invalid` | `boolean` | — | no | Marks the field invalid (sets data-invalid + the control's aria-invalid). Useful when validation is controlled externally. |
+| `disabled` | `boolean` | `false` | no | Disables the field and its control. |
+| `name` | `string` | — | no | Identifies the field when a form is submitted. |
+| `validate` | `(value, formValues) => string | string[] | null | Promise<…>` | — | no | Custom validation; returns error message(s) or null. |
+| `validationMode` | `'onSubmit' | 'onBlur' | 'onChange'` | `'onSubmit'` | no | When the field validates. |
+| `match` | `boolean | keyof ValidityState` | — | no | On FieldError — which ValidityState shows the message; `true` always shows it (for externally controlled validation). |
+| `variant` | `'legend' | 'label'` | `'legend'` | no | On FieldLegend — large legend text or small label text. |
+
+## Behavior
+
+Field is built on Base UI's Field primitive. It wires a control to its label,
+description, and error automatically, and pairs with the _bare_ controls
+(`InputBox`, plus the self-labeling `Checkbox` / `Switch` / `RadioGroup` for
+grouping) — not the self-contained `InputText` / `InputSearch` fields.
+
+```gherkin
+Scenario: Label associates with the control
+  Given a Field with a FieldLabel and a FieldControl render={<InputBox />}
+  Then the label's htmlFor matches the control's id (no manual wiring)
+  And clicking the label focuses the control
+```
+
+```gherkin
+Scenario: Description is announced
+  Given a Field with a FieldDescription
+  Then the control's aria-describedby references the description
+```
+
+```gherkin
+Scenario: Error on invalid
+  Given a Field marked invalid (or failing validation)
+  Then data-invalid is set, the control gets aria-invalid
+  And a FieldError message is shown (always, when match is forced on)
+```
+
+```gherkin
+Scenario: Orientation
+  Given orientation="horizontal"
+  Then the label and control lay out in a row
+  And orientation="responsive" stacks until the @md container width, then rows
+```
+
+```gherkin
+Scenario: Group related fields
+  Given a FieldSet with a FieldLegend and a FieldGroup of fields
+  Then the legend names the group and the fields stack with consistent spacing
+```
+
+```gherkin
+Scenario: Group self-labeling controls
+  Given a FieldSet of Checkboxes that each carry their own label
+  Then the set provides the legend + spacing and each control names itself
+```
+
+```gherkin
+Scenario: Separate fields
+  Given a FieldSeparator with text between two fields
+  Then a divider renders with the text centered over the rule
+```
+
+## Accessibility
+
+Field's purpose is accessibility: it removes the manual wiring that's easy to get
+wrong.
+
+- **Label association** is automatic — `FieldLabel` (Base UI `Field.Label`) links
+  to the control rendered through `FieldControl`, so no `htmlFor`/`id` plumbing.
+- **Description** is exposed via `aria-describedby` on the control automatically.
+- **Error / invalid:** an invalid field sets `data-invalid` and the control's
+  `aria-invalid`; `FieldError` carries `role="alert"` semantics so the message is
+  announced. Don't rely on color alone — the message text states the problem.
+- **Grouping:** `FieldSet` is a native `<fieldset>` and `FieldLegend` a
+  `<legend>`, so a group of related fields (e.g. a set of checkboxes or radios)
+  is named for assistive tech. The field root carries `role="group"`.
+- Pair Field with the **bare** controls. `Checkbox` / `Switch` already self-label
+  (their own `label` prop) — let them name themselves inside a `FieldSet`; don't
+  double-label them with a `FieldLabel`.
+
+## Contrast
+
+Error/invalid text uses `--ui-text-on-status-danger` (a readable red on the page
+surface in both themes) — not the bridged `text-destructive`, which resolves to
+the pale danger _surface_. Description text uses the muted
+`--ui-text-on-surface-secondary`; both meet contrast in light and dark.

package/dist/llms/filter-cards.md

@@ -0,0 +1,157 @@
+# FilterCards
+
+> A horizontal row container (the Figma `FilterCards` component) that lays out a set of `CardFilter` items, stretching each to an equal share of the available width. Pure layout — it owns no visual styling of its own besides the inter-card gap. Figma's nested `ListCards` slot maps to `children`.
+
+**Status:** ready · **Category:** data-display · **Since:** v0.62.0
+
+## Import
+
+```tsx
+import { FilterCards, CardFilter } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<FilterCards>
+  <CardFilter label="Total assets" value="125" />
+  <CardFilter label="Active filters" value="3" variant="clickable" />
+  <CardFilter label="Pending" variant="static-empty" />
+</FilterCards>
+```
+
+A horizontal row container (the Figma `FilterCards` component) for
+`CardFilter` items — Figma's nested `ListCards` slot maps to the `children`
+you pass in. It stretches each child to an equal share of the available width
+and owns the 16px gap between them — pure layout, no visual styling of its
+own.
+
+## When to use
+
+- A row of stat/filter cards summarizing counts across a dashboard (e.g.
+  "Total assets", "Active filters", "Pending").
+- Any number of `CardFilter` children — the row redistributes width evenly as
+  the count changes.
+
+## When not to use
+
+- For a single metric with no siblings — render a bare `CardFilter` instead.
+- For a wrapping grid of cards — `FilterCards` is a single row, not a grid;
+  use `Grid`/`Stack` for a wrapping layout.
+
+## Examples
+
+```tsx
+import { FilterCards, CardFilter } from '@acronis-platform/ui-react';
+import { SquareDashedIcon } from '@acronis-platform/icons-react/stroke-mono';
+
+<FilterCards>
+  <CardFilter label="Total assets" value="125" icon={<SquareDashedIcon />} />
+  <CardFilter
+    variant="clickable"
+    label="Active filters"
+    value="3"
+    icon={<SquareDashedIcon />}
+  />
+  <CardFilter variant="static-empty" label="Pending" />
+</FilterCards>;
+```
+
+## Overflow
+
+Cards shrink to fill the row, but never below their own content's natural
+width — a card's label/value is never clipped. If there are enough cards that
+they no longer fit at that natural width, the row overflows its container.
+`FilterCards` adds no scroll or wrap of its own — wrap the row in a
+horizontally scrollable container if that's the desired behavior:
+
+```tsx
+<div className="overflow-x-auto">
+  <FilterCards>{/* many cards */}</FilterCards>
+</div>
+```
+
+## Parts
+
+| Part   | Element | Description                                                                                       |
+| ------ | ------- | ------------------------------------------------------------------------------------------------- |
+| `root` | `<div>` | The row itself — flex, 16px gap, equal-width children.                                            |
+| `card` | (any)   | Consumer-supplied children (typically `CardFilter`), stretched to fill an equal share of the row. |
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `render` | `RenderProp` | `undefined` | no | Base UI composition prop on the root — replaces the rendered `<div>` with another element or component while merging props and classes. React-only; other frameworks use their own polymorphism. |
+
+## Content slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | The cards to lay out in the row — typically a list of `CardFilter` elements. Each child is stretched to an equal share of the available width (flex-1), regardless of how many are passed in. |
+
+## Behavior
+
+### Layout
+
+**Given** a `FilterCards` with two or more children
+**When** it renders
+**Then** the children lay out in a single horizontal row with a 16px gap
+(`--ui-gap-16`) and each child stretches to an equal share of the row's
+width via `flex: 1 1 0%` — except a child whose own content exceeds that
+share, which takes more (see the min-content overflow scenario below).
+
+**Given** a single `FilterCards` child
+**When** it renders
+**Then** that child fills the entire row width (equal share of one).
+
+**Given** a `CardFilter` child with its own fixed 224px width
+**When** it is composed inside `FilterCards`
+**Then** the row's `flex-1` stretching overrides that fixed width — matching
+the "fill container" sizing Figma applies to each `CardFilter` instance inside
+this composition.
+
+**Given** enough children that their combined natural (min-content) width
+exceeds the row
+**When** `FilterCards` renders
+**Then** each card only shrinks down to its own content's natural width — no
+card's label/value is ever clipped — and the row overflows its container
+instead. `FilterCards` adds no scroll or wrap of its own; the consumer is
+responsible for giving the row a scrollable container (e.g.
+`overflow-x-auto`) when that degradation is undesired. There is no design
+spec for this case — Figma only documents the exact-fit composition.
+
+**Constraint:** `FilterCards` owns no state of its own — it is a pure function
+of its `children`. Any interaction state (hover, selected, …) lives entirely
+on the child (see `CardFilter`'s own spec).
+
+### Composition
+
+**Given** a `render` prop (e.g. `<section />`)
+**When** `FilterCards` renders
+**Then** it renders as that element with the row's classes and props merged
+on.
+
+**Given** children other than `CardFilter`
+**When** `FilterCards` renders
+**Then** they lay out identically — `FilterCards` does not constrain the
+child type, only its layout.
+
+## Accessibility
+
+- **Role:** a plain `<div>` (`role="group"` is a reasonable authoring choice,
+  not enforced by the component) — pure layout, not a landmark or a list. The
+  `render` prop can swap the element.
+- **No component-owned interaction:** `FilterCards` renders no interactive
+  element itself. All keyboard/focus/ARIA behavior belongs to its children
+  (e.g. `CardFilter`'s `clickable` variant) — see that component's own
+  accessibility spec.
+- **Accessible name:** none required on the row itself; if the group of cards
+  needs an accessible label (e.g. "Filter summary"), pass `aria-label` — it
+  passes through as a native `<div>` attribute.
+- **Reading order:** children read in DOM order, left-to-right in `ltr`,
+  mirrored in `rtl` via the browser's default flex-row bidi behavior — no
+  logical-vs-physical utility is involved since the row uses `flex` with no
+  directional margin/padding.
+- **WCAG:** no component-specific requirements beyond what its children
+  contribute (1.3.1 structure is satisfied by DOM order).