@acronis-platform/ui-react 3.0.0 → 4.1.0

package/dist/llms/radial-bar-chart.md

@@ -0,0 +1,319 @@
+# RadialBarChart
+
+> A typed radial-bar-chart composition over the shared `Chart` primitives (a polar/radial type). Plots each data row as a concentric arc sized by `dataKey` and colored per `nameKey` — or, with `dataKeys`, one arc per metric — inside a `ChartContainer` with an optional background track, tooltip, and legend. No variant axes: the sweep (start/end angle), radii and centre are plain props. `valueDomain` scales the arcs against a known range, which is what turns a single value into a readable gauge; `segments` draws such a gauge's ring as notched pieces and `centerLabel` puts the reading in the hole. Ported from the apps/demo `RadialChartPlayground`.
+
+**Status:** draft · **Category:** data-display · **Since:** v0.58.0
+
+## Import
+
+```tsx
+import { RadialBarChart } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<RadialBarChart
+  config={config}
+  data={data}
+  dataKey="value"
+  nameKey="browser"
+  className="h-[360px] w-[360px]"
+/>
+```
+
+A typed radial-bar-chart built on the shared `Chart` primitives. Give it `data`,
+a per-arc `config`, the value field (`dataKey`), and the label field (`nameKey`);
+it renders a themed recharts `RadialBarChart` — concentric arcs, an optional
+background track, tooltip, and legend included — so you don't hand-compose
+recharts children.
+
+Arc colors come from the `palette` prop — a dataviz palette resolving to the
+`--ui-dataviz-*` tokens, `categorical` by default — not from `config`.
+
+> **Design-pending v1.** Ported from the apps/demo `RadialChartPlayground`. The
+> chrome is reconciled with Figma later; Code Connect is deferred.
+
+## When to use
+
+- A compact, decorative comparison of a few categories (device/browser share).
+- A gauge-style progress readout — one value against a known range. This needs
+  **`valueDomain`**, not just a half sweep: without a domain every arc is scaled
+  against the largest value in the data, so a lone value always fills whatever
+  sweep it is given. Pair it with `centerLabel` for the reading, and `segments`
+  for the notched-ring look.
+- When the circular form is worth more than precise value comparison.
+
+## When not to use
+
+- Accurate magnitude comparison — a bar chart is far easier to read (arc length
+  on a curve distorts).
+- Part-to-whole of a single total — a pie/donut reads more directly.
+- A trend over time — use a line or area chart.
+
+## Variants
+
+None. RadialBarChart has no CVA variant axes — its sweep (`startAngle` /
+`endAngle`), radii (`innerRadius` / `outerRadius`) and centre (`cx` / `cy`) are
+plain geometry props, so a caller can build a full ring or a half circle;
+`showBackground` toggles the muted track.
+
+What the chart _reads as_ is driven by the data mapping rather than a variant:
+one arc per row (the default), one arc per metric (`dataKeys`), or a single-value
+gauge scaled by `valueDomain` — optionally with its ring notched into `segments`.
+
+## Example
+
+```tsx
+import { RadialBarChart } from '@acronis-platform/ui-react';
+import type { ChartConfig } from '@acronis-platform/ui-react';
+
+const data = [
+  { browser: 'Chrome', value: 65 },
+  { browser: 'Safari', value: 50 },
+  { browser: 'Firefox', value: 35 },
+  { browser: 'Edge', value: 25 },
+];
+
+const config = {
+  Chrome: { label: 'Chrome', color: 'var(--ui-background-brand-secondary)' },
+  Safari: {
+    label: 'Safari',
+    color: 'var(--ui-background-status-strong-danger)',
+  },
+  Firefox: {
+    label: 'Firefox',
+    color: 'var(--ui-background-status-strong-success)',
+  },
+  Edge: { label: 'Edge', color: 'var(--ui-background-status-strong-warning)' },
+} satisfies ChartConfig;
+
+<RadialBarChart
+  config={config}
+  data={data}
+  dataKey="value"
+  nameKey="browser"
+  className="h-[360px] w-[360px]"
+/>;
+```
+
+Arc colors reference existing semantic `--ui-*` tokens, keyed by each arc's
+`nameKey` value. `--ui-background-status-strong-*` is chromatic in every brand;
+`--ui-background-brand-secondary` is brand-dependent (blue in `default`, neutral
+in some white-label brands), so it is not color-stable across brands until the
+real data-viz palette lands.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `data` | `ReadonlyArray<Record<string, string | number>>` | — | yes | Row-per-arc data — each row holds a `nameKey` label and a `dataKey` numeric value. |
+| `config` | `ChartConfig` | — | yes | Arcs take their colour from the container's `palette`; each entry, keyed by the arc's `nameKey` value, maps that arc to a `label` and an optional `tone`. Resolved into the `--color-<name>` custom properties the arcs fill from. |
+| `dataKey` | `string` | — | yes | The numeric field that sizes each arc. Ignored when dataKeys is set. |
+| `dataKeys` | `string[]` | — | no | Multi-metric mode: one arc per key instead of one per row, colored and named from config keyed by the KEY (the cartesian-chart convention). Every metric shares one angular scale, so pair it with valueDomain. |
+| `nameKey` | `string` | — | yes | The label field that names each arc (drives legend, tooltip, and the `--color-<name>` lookup). Values should be unique per chart — arcs sharing a name share one config/color entry. |
+| `innerRadius` | `number` | `20` | no | Inner radius of the innermost arc. |
+| `outerRadius` | `number` | `60` | no | Outer radius of the outermost arc. |
+| `startAngle` | `number` | `90` | no | Angle (degrees) the arcs sweep from. |
+| `endAngle` | `number` | `-270` | no | Angle (degrees) the arcs sweep to (default is a full clockwise circle). |
+| `valueDomain` | `[number, number]` | — | no | The value range the sweep represents. Without it every arc is drawn relative to the largest value in the data, so a single value always fills the sweep — which is never what a gauge means. |
+| `cornerRadius` | `number` | `4` | no | Corner radius on each arc's ends. |
+| `cx` | `number | string` | `'50%'` | no | Horizontal center of the arcs, in px or a percentage of the width. |
+| `cy` | `number | string` | `'50%'` | no | Vertical center of the arcs, in px or a percentage of the height. Worth moving for a half-circle gauge, whose drawn half otherwise sits in the upper half of the surface. |
+| `barSize` | `number` | — | no | Thickness of each arc, in px. Omit to let the radii and gaps size it. |
+| `barGap` | `number | string` | — | no | Gap between the arcs of different metrics in one band, in px. |
+| `barCategoryGap` | `number | string` | — | no | Gap between bands, in px or a percentage string. |
+| `minAngle` | `number` | — | no | Smallest angle a non-zero arc may occupy, in degrees, so a tiny value stays visible. The floor also applies to a 0, which then reads as a small positive — leave unset when a metric can legitimately be zero. |
+| `margin` | `{ top?: number; right?: number; bottom?: number; left?: number }` | — | no | Plot-area margin, in px. Omit for recharts' default (5 a side). |
+| `segments` | `number` | — | no | Draw a single-value gauge's ring as this many equal segments, notched apart. Needs valueDomain, and applies only to a single-value gauge: anything else — more than one row, dataKeys set, fewer than two segments, or a dataKey value that is not a number — falls back to the normal concentric arcs (legend included) rather than erroring. The ring is then synthetic geometry, so the arc labels and the legend are suppressed and showBackground is redundant (the unreached segments are the track); the tooltip reads the metric wherever the ring is hovered. |
+| `segmentGap` | `number` | `3` | no | Gap between a segmented gauge's segments, in degrees. Clamped so the segments always keep at least half the sweep. |
+| `centerLabel` | `{ value?: string | number; label?: string | number }` | — | no | The readout in the hole — a headline value and/or a caption, stacked and centered. Needs an innerRadius big enough to hold the text; it is not clipped to the hole. |
+| `showPolarGrid` | `boolean` | `false` | no | Draw the concentric polar grid behind the arcs. |
+| `showBackground` | `boolean` | `true` | no | Render a muted background track behind each arc. |
+| `showTooltip` | `boolean` | `true` | no | Render the hover tooltip. |
+| `showLegend` | `boolean` | `true` | no | Render the legend. |
+| `legendValueFormatter` | `(value: string | number) => string` | — | no | Format each arc's value in the list legend. Ignored in multi-metric mode (values are per-row, not per-series). |
+| `tooltipContent` | `ReactElement | ((props) => ReactNode)` | — | no | Replace the default tooltip. Pass a configured ChartTooltipContent (from this library) — e.g. with a formatter / labelFormatter — to customize the tooltip content without composing recharts. Ignored when showTooltip is false. |
+| `animate` | `boolean` | `false` | no | Enable entrance animation. Off by default so output/baselines are unchanged. |
+| `animationDuration` | `number` | — | no | Animation duration in ms. |
+| `animationBegin` | `number` | — | no | Delay before the animation starts, in ms. |
+| `animationEasing` | `'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear'` | — | no | Easing curve. |
+| `showLabels` | `boolean` | `false` | no | Render a value label on each data point/segment. |
+| `labelPosition` | `'outside' | 'center' | 'centerTop' | 'centerBottom' | 'insideStart' | 'insideEnd' | 'end'` | `'insideStart'` | no | Where the value labels sit on the arc. Polar positions only — the cartesian ones collapse to the same mid-radius placement. Inside placements switch the label to the on-fill token. |
+| `labelFormat` | `'value' | 'name-value'` | `'value'` | no | What each data label reads — the value alone, or the arc's name and its value. The name is the row's nameKey value, or the metric's config label in multi-metric mode. |
+| `labelFormatter` | `(value) => string` | — | no | Format each label value (reuses the tick formatters). Formats only the numeric part, so a label and its tooltip stay in the same units. |
+
+## Behavior
+
+`RadialBarChart` is a typed [recharts](https://recharts.org) composition over the
+shared `Chart` primitives. It plots each data row as a concentric arc sized by
+`dataKey` and colored per `nameKey`, inside a `ChartContainer`.
+
+```gherkin
+Scenario: Render arcs from data and config
+  Given data rows and a config mapping each arc name to a label and color
+  And dataKey "value" and nameKey "browser"
+  Then one concentric arc renders per row, sized by its dataKey value
+  And each arc fills from its injected --color-<name> custom property
+```
+
+```gherkin
+Scenario: Full circle (default)
+  Given startAngle 90 and endAngle -270
+  Then the arcs sweep a full clockwise circle
+```
+
+```gherkin
+Scenario: Gauge
+  Given startAngle 180 and endAngle 0
+  Then the arcs sweep a half circle (a gauge)
+```
+
+The sweep's **direction** is the order of its two angles — `90 → -270` runs
+clockwise, `-270 → 90` counter-clockwise. There is no separate `clockWise` prop:
+recharts 3 exposes none for a radial bar, and the angles already say it.
+
+```gherkin
+Scenario: A single value needs a scale to read as a gauge
+  Given one data row and no valueDomain
+  Then its arc fills the whole sweep, because the row is its own maximum
+  But given valueDomain [0, 100] and a value of 65
+  Then the arc covers 65% of the sweep over the background track
+```
+
+```gherkin
+Scenario: Center readout
+  Given centerLabel { value, label }
+  Then the value renders large and the caption under it, centered in the hole
+  And the block is centered as a whole when both lines are present
+```
+
+```gherkin
+Scenario: Multi-metric
+  Given dataKeys ["used", "quota"]
+  Then one arc renders per metric, not one per row
+  And each takes its color and legend label from config keyed by that metric
+  And nameKey names the band the metrics share
+```
+
+Segment gaps are **decorative on a pie (`paddingAngle`) but structural here**: a
+radial arc has no padding of its own, so a notched ring is built by laying the
+pieces out as one stack of synthetic series measured in degrees. That is what
+`segments` does — and it is deliberately scoped to a single-value gauge, where the
+pieces mean something; concentric rows keep the clean single-arc rendering.
+
+```gherkin
+Scenario: Segmented gauge
+  Given one data row, valueDomain [0, 38], a value of 29 and segments 8
+  Then the ring renders as 8 equal segments separated by transparent notches
+  And the segments up to 29/38 of the drawn ring take the arc's color
+  And the rest take the track's muted surface
+  And the notches never eat into the value's proportion
+  And the arc labels and the legend are suppressed (the pieces are not data rows)
+  And hovering anywhere on the ring reads the metric and its maximum
+```
+
+```gherkin
+Scenario: Segments only apply to a single-value gauge
+  Given segments is set
+  But data holds more than one row, or dataKeys is set,
+    or segments is fewer than two, or the dataKey value is not a number
+  Then the chart renders its normal concentric arcs, legend included,
+    and ignores segments
+```
+
+```gherkin
+Scenario: A domain that cannot place a value
+  Given segments and a valueDomain with no span ([n, n]) or an inverted one
+  Then the ring renders as all track and no value is claimed
+  Because a gauge that cannot read its scale must not report progress
+```
+
+```gherkin
+Scenario: A tiny value stays visible
+  Given minAngle 12
+  Then a non-zero arc smaller than 12 degrees is grown to 12 degrees
+  And it grows along the sweep's own direction, not against it
+```
+
+```gherkin
+Scenario: Background track
+  Given showBackground is true
+  Then a muted track renders behind each arc
+  But when false only the value arcs render
+```
+
+```gherkin
+Scenario: Tooltip on hover
+  Given showTooltip is true
+  When the user hovers an arc
+  Then a card shows that arc's name and value
+```
+
+```gherkin
+Scenario: Legend
+  Given showLegend is true
+  Then a swatch + label renders for each arc (from nameKey / config)
+  And in multi-metric mode one renders per metric instead (from dataKeys / config)
+```
+
+```gherkin
+Scenario: Data labels
+  Given showLabels is true
+  Then each arc carries its value, following the arc from labelPosition
+  And labelFormat "name-value" prefixes the arc's name
+  And an inside placement switches the label to the on-fill token
+```
+
+```gherkin
+Scenario: Empty data
+  Given data is an empty array
+  Then the chart renders with no arcs and does not throw
+```
+
+```gherkin
+Scenario: Entrance animation is opt-in
+  Given animate is unset
+  Then the series render at their final geometry with no entrance animation
+  And the committed visual baselines are unaffected
+```
+
+```gherkin
+Scenario: Reduced motion
+  Given animate is true
+  And a user with prefers-reduced-motion
+  Then the entrance animation does not play and the series render at their final geometry
+  And the same applies when rendering on the server
+```
+
+## Accessibility
+
+- recharts' `accessibilityLayer` is **on by default** (recharts v3), giving the
+  chart keyboard focus and an accessible description of the plotted arcs.
+- A radial bar chart is inherently visual and hard to read precisely (arc length
+  on a curve is a poor quantitative encoding). **Pair it with a text
+  alternative** — a caption, a summary, or an adjacent data table carrying the
+  same numbers — and give the chart an accessible name (`aria-label` /
+  `aria-labelledby` referencing a visible heading). The wrapper forwards native
+  `div` attributes, so `aria-*` pass through.
+- Do **not** rely on color alone to distinguish arcs. Keep `showLegend` (or
+  `showLabels`) on so each color is paired with a text label — the radial arcs
+  carry none of their own. The tooltip does **not** count as that pairing: it is
+  hover/focus-only, so it can't be the only place a value exists.
+- A **segmented gauge** (`segments`) suppresses both the legend and the arc
+  labels unconditionally — its ring is geometry, not data rows. `centerLabel` is
+  therefore not decorative there but the chart's only always-visible reading;
+  give it the value and its scale (`29`, `/ 38 criteria met`).
+- The chrome (tooltip, legend) and the muted background track resolve to semantic
+  `--ui-*` tokens that meet contrast in light and dark. **Arc colors are
+  caller-supplied** via `config` — pick values that meet 3:1 against the surface
+  and are distinguishable for color-vision deficiencies. The borrowed semantic
+  tokens are a design-pending stopgap until the `--ui-chart-*` palette lands.
+- Watch recharts issue [#4809](https://github.com/recharts/recharts/issues/4809)
+  on the a11y layer for heavily-customized charts.
+
+## Contrast
+
+Chart chrome and the background track meet contrast in both themes via the
+semantic tokens. Arc fills come from `config` and are the caller's
+responsibility — keep adjacent arcs distinguishable from each other.

package/dist/llms/radio.md

@@ -0,0 +1,255 @@
+# RadioGroup
+
+> A group of mutually exclusive options where exactly one can be selected. Selecting an option deselects the previously selected one. Composed from a RadioGroup container and Radio items.
+
+**Status:** ready · **Category:** forms · **Since:** v0.7.0
+
+## Import
+
+```tsx
+import { RadioGroup, Radio } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<RadioGroup value={plan} onValueChange={setPlan} aria-label="Plan">
+  <label>
+    <Radio value="free" /> Free
+  </label>
+  <label>
+    <Radio value="standard" /> Standard
+  </label>
+</RadioGroup>
+```
+
+A group of mutually exclusive options where the user selects exactly one.
+Selecting an option deselects the previous one. Built from a `RadioGroup`
+container (owns the selected value) and `Radio` items.
+
+## When to Use
+
+- Choose exactly one option from a small, visible set (2–7 options).
+- The options are mutually exclusive.
+
+## When NOT to Use
+
+- **Multiple selections** (or none) — use checkboxes.
+- **Many options** / long lists — use a select / combobox.
+- **On/off for a single setting** — use a switch.
+
+## Parts
+
+| Part         | Element                      | Role                                      |
+| ------------ | ---------------------------- | ----------------------------------------- |
+| `RadioGroup` | `<div role="radiogroup">`    | Owns the selected value; groups the items |
+| `Radio`      | `<span role="radio">` (16px) | One option; takes a `value`               |
+| (indicator)  | 8px inner dot                | Shown on the selected item                |
+
+## States
+
+| State      | How                          | Visual                                        |
+| ---------- | ---------------------------- | --------------------------------------------- |
+| Unselected | default                      | Idle border, white fill, no dot               |
+| Hover      | pointer hover                | `--ui-radio-unchecked-box-border-color-hover` |
+| Focus      | focus                        | 3px `--ui-focus-primary` ring                 |
+| Selected   | group `value` === item value | Active fill + border + dot                    |
+| Disabled   | `disabled` (group or item)   | Faint fill/border, muted dot, not selectable  |
+
+## Quick Example
+
+### React
+
+```tsx
+import { RadioGroup, Radio } from '@acronis-platform/ui-react';
+
+function PlanPicker() {
+  const [plan, setPlan] = useState('standard');
+  return (
+    <RadioGroup value={plan} onValueChange={setPlan} aria-label="Plan">
+      <label className="inline-flex items-center gap-2">
+        <Radio value="free" /> Free
+      </label>
+      <label className="inline-flex items-center gap-2">
+        <Radio value="standard" /> Standard
+      </label>
+      <label className="inline-flex items-center gap-2">
+        <Radio value="premium" /> Premium
+      </label>
+    </RadioGroup>
+  );
+}
+```
+
+> Each `Radio` is composed with its label by the consumer today; a `Field`
+> component that wires label/description is planned.
+
+## Spec Files
+
+| File               | Contents                                                    |
+| ------------------ | ----------------------------------------------------------- |
+| `index.yaml`       | Identity, status, category, Figma link                      |
+| `anatomy.yaml`     | Root, item + indicator parts, internal value state, states  |
+| `api.yaml`         | Framework-agnostic contract + framework adapters            |
+| `tokens.yaml`      | `--ui-radio-*` + focus-ring token references                |
+| `behavior.md`      | Given/When/Then behavior scenarios                          |
+| `accessibility.md` | ARIA, keyboard map, screen-reader and contrast requirements |
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `value` | `string` | — | no | Controlled selected value. Pair with the change event. |
+| `default-value` | `string` | — | no | Initially selected value when uncontrolled. |
+| `disabled` | `boolean` | `false` | no | Disables every item in the group. |
+| `name` | `string` | — | no | Form field name submitted with the selected value. |
+| `required` | `boolean` | `false` | no | Requires a selection before the form can submit. |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `value-change` | `string` | Fired when the selection changes (React: `onValueChange`). Payload is the newly selected item's value. |
+
+## Content slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Radio items. Each takes a `value` (and optional `disabled`); compose each with its label (e.g. wrap both in a `<label>`). |
+
+## Behavior
+
+### Rendering
+
+#### Renders a radio group
+
+**Given** a RadioGroup with several Radio items
+**When** it renders
+**Then** the container exposes `role="radiogroup"`
+**And** each item exposes `role="radio"` with `aria-checked` reflecting selection
+
+#### Reflects the selected value
+
+**Given** a RadioGroup with `default-value` matching one item
+**When** it renders
+**Then** that item has `aria-checked="true"` and shows the inner dot
+**And** all other items have `aria-checked="false"`
+
+---
+
+### Interaction
+
+#### Selecting deselects the previous option
+
+**Given** a RadioGroup with item A selected
+**When** the user clicks item B
+**Then** B becomes selected (`aria-checked="true"`)
+**And** A is deselected
+**And** `value-change` fires with B's value
+
+#### Keyboard navigation
+
+**Given** focus is inside the group
+**When** the user presses Arrow keys
+**Then** focus moves to the adjacent item and selects it (roving tab index)
+
+#### Disabled item is not selectable
+
+**Given** a Radio item with `disabled` (or a disabled group)
+**When** the user clicks it
+**Then** the selection does not change
+**And** `value-change` does not fire
+**And** the disabled form tokens apply
+
+---
+
+### States
+
+#### Hover
+
+**Given** an enabled, unselected item
+**When** the pointer hovers it
+**Then** the border uses `--ui-radio-unchecked-box-border-color-hover`
+
+#### Focus
+
+**Given** an item
+**When** it receives keyboard focus
+**Then** a 3px `--ui-focus-primary` ring is shown
+
+#### Selected fill
+
+**Given** a selected item
+**When** it renders
+**Then** the circle fills with `--ui-radio-checked-box-color-idle`
+**And** the dot uses `--ui-radio-checked-icon-color-idle`
+
+---
+
+### Edge Cases
+
+#### Controlled vs uncontrolled
+
+**Given** a controlled RadioGroup (`value` + change handler)
+**When** the user clicks an item
+**Then** the selection changes only when the consumer updates `value`.
+
+#### Single selection invariant
+
+**Given** any RadioGroup
+**When** rendered
+**Then** at most one item is selected at a time.
+
+## Accessibility
+
+Implements the [WAI-ARIA Radio Group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)
+via Base UI's RadioGroup / Radio primitives.
+
+## ARIA Roles and Attributes
+
+| Element / Attribute  | Value                 | Reason                                  |
+| -------------------- | --------------------- | --------------------------------------- |
+| group `role`         | `"radiogroup"`        | Groups the options for assistive tech   |
+| item `role`          | `"radio"`             | Identifies each option                  |
+| item `aria-checked`  | `"true"/"false"`      | Reflects whether the option is selected |
+| item `aria-disabled` | present when disabled | Disabled items are skipped              |
+
+Give the group an accessible name (`aria-label` / `aria-labelledby`), and give
+each item an accessible name via its associated `<label>`.
+
+## Keyboard Navigation
+
+| Key              | Action                                                    |
+| ---------------- | --------------------------------------------------------- |
+| Tab              | Moves focus into the group (to the selected / first item) |
+| Arrow Up/Left    | Selects and focuses the previous item                     |
+| Arrow Down/Right | Selects and focuses the next item                         |
+| Space            | Selects the focused item                                  |
+
+The group is a single tab stop (roving tab index): Tab enters/leaves it; Arrow
+keys move between items.
+
+## Screen Reader Requirements
+
+1. The group is announced with its label and the count/position of options.
+2. Each item announces its label and selected state.
+3. Disabled items announce as disabled and are skipped by Arrow navigation.
+
+## Color and Contrast
+
+| Element                     | Minimum Ratio | Standard               |
+| --------------------------- | ------------- | ---------------------- |
+| Circle border vs background | 3:1           | WCAG 1.4.11 (non-text) |
+| Dot vs selected fill        | 3:1           | WCAG 1.4.11 (non-text) |
+| Focus indicator             | 3:1           | WCAG 1.4.11            |
+
+Selection is not signalled by color alone — the inner dot and `aria-checked`
+distinguish selected from unselected.
+
+## Testing Checklist
+
+- [ ] Group has `role="radiogroup"` + an accessible name
+- [ ] Items are `role="radio"` with `aria-checked`
+- [ ] Arrow keys move + select; group is a single tab stop
+- [ ] Disabled items are not selectable and are skipped
+- [ ] Border / dot / focus ring meet 3:1