@acronis-platform/ui-react 3.0.0 → 4.0.0

package/dist/llms/loading.md

@@ -0,0 +1,130 @@
+# Loading
+
+> A composite loading indicator — a spinning ring plus an optional label — for four placement contexts: inline (flush in text flow), two card-like chips for a primary/secondary app surface, and a higher-contrast chip for busy/photo surfaces. Distinct from `Spinner` (the bare ring primitive it reuses for its icon): `Spinner` has no label or container and is unaffected by this addition.
+
+**Status:** ready · **Category:** feedback · **Since:** v0.58.0
+
+## Import
+
+```tsx
+import { Loading } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<Loading />
+<Loading variant="onSurfacePrimary" label="Fetching your data…" />
+<Loading variant="onScreen" hasLabel={false} />
+```
+
+A composite loading indicator — a spinning ring plus an optional label — for
+four placement contexts.
+
+## When to use
+
+- Indicating an in-progress, indeterminate operation, with a message, in one
+  of four contexts: inline in text flow, as a card-like chip over an app
+  surface, or as a higher-contrast chip over a busy/photo/video surface.
+
+## When not to use
+
+- For a small inline icon-scale spinner (e.g. inside a `Button` or `Toast`) —
+  those compose the internal `Spinner` primitive directly; it isn't part of
+  the public component set.
+- For determinate progress — use `Progress`.
+- For content placeholders — use a skeleton.
+
+## Parts
+
+| Part  | Description                                                        |
+| ----- | ------------------------------------------------------------------ |
+| icon  | The `Spinner` primitive, sized/colored per variant, `aria-hidden`. |
+| label | Optional visible text (`hasLabel`), colored per variant.           |
+
+## Example
+
+```tsx
+import { Loading } from '@acronis-platform/ui-react';
+
+<Loading />
+<Loading variant="onSurfacePrimary" label="Fetching your data…" />
+<Loading variant="onSurfaceSecondary" />
+<Loading variant="onScreen" hasLabel={false} />
+```
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `variant` | `'inline' | 'onSurfacePrimary' | 'onSurfaceSecondary' | 'onScreen'` | `'inline'` | no | Placement context. `inline` sits flush in text flow; `onSurfacePrimary`/ `onSurfaceSecondary` are card-like chips for a primary/secondary app surface; `onScreen` is the higher-contrast dark chip for busy/photo/video surfaces. Each maps to its own `--ui-loading-<variant>-*` tokens. |
+| `hasLabel` | `boolean` | `true` | no | Whether `label` renders visibly. When false, `label` is still exposed to assistive tech via the root's `aria-label`. |
+| `label` | `string` | `'Data is loading…'` | no | The loading message. |
+
+## Behavior
+
+Loading is a pure function of its props — no internal state, no interaction.
+It renders continuously (via `Spinner`) while mounted.
+
+```gherkin
+Scenario: Default variant
+  Given a Loading with no props
+  Then it renders the inline variant with a 16px spinner and a visible label
+  And the label reads "Data is loading…"
+```
+
+```gherkin
+Scenario: Card variants
+  Given a Loading with variant="onSurfacePrimary" (or "onSurfaceSecondary")
+  Then it renders a rounded, padded chip with a 32px spinner stacked above the label
+```
+
+```gherkin
+Scenario: On-screen variant
+  Given a Loading with variant="onScreen"
+  Then it renders a higher-contrast dark chip with a 48px white spinner and white label,
+    suited to placement over busy/photo/video surfaces
+```
+
+```gherkin
+Scenario: Custom label
+  Given a Loading with label="Uploading files…"
+  Then the visible label (or, when hasLabel is false, the root's aria-label) reads that text
+```
+
+```gherkin
+Scenario: Label hidden but still accessible
+  Given a Loading with hasLabel={false}
+  Then no visible label renders
+  And the root carries aria-label equal to `label`, so assistive tech still announces it
+```
+
+```gherkin
+Scenario: Reduced motion
+  Given a user with prefers-reduced-motion
+  Then the platform animation honors that preference (the ring is still shown)
+```
+
+## Accessibility
+
+- The root is `role="status"` (a polite live region) — mounting it announces
+  the loading state without stealing focus.
+- The `Spinner` icon is rendered `aria-hidden="true"`: it is purely decorative
+  motion here, since the root already owns the accessible name/announcement.
+  This also prevents assistive tech from double-announcing `Spinner`'s own
+  built-in "Loading" label alongside Loading's own label.
+- When `hasLabel` is true (default), the visible label's text content is the
+  live region's announcement — no separate `aria-label` is needed or set.
+- When `hasLabel` is false, the root carries `aria-label={label}` so the
+  loading state is still announced even though nothing is shown on screen.
+- Pair with real content once the operation completes; Loading has no
+  "complete" state of its own — remove it from the DOM (or swap it for the
+  loaded content) when the operation finishes.
+
+## Contrast
+
+Each variant wires its own icon/label color tokens
+(`--ui-loading-<variant>-icon-color` / `-label-color`), so contrast against the
+variant's own container background is guaranteed independent of the ambient
+page background — this is why `onScreen` exists as a distinct, higher-contrast
+variant for busy/photo/video surfaces rather than reusing `onSurfacePrimary`.

package/dist/llms/meter.md

@@ -0,0 +1,177 @@
+# Meter
+
+> A labelled bar showing a scalar value within a known range — a fractional value / share (`role="meter"`, mirroring the HTML `<meter>` element), as opposed to `Progress` which tracks a task over time. One row: label + `value · %` over a proportional track bar, with a hover tooltip; designed to be stacked into a ranked breakdown (a "bar list"). Design-pending v1 (no `--ui-chart-*` palette; the fill color is caller-supplied per row).
+
+**Status:** draft · **Category:** data-display · **Since:** v0.58.0
+
+## Import
+
+```tsx
+import { Meter } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<Meter
+  label="Critical"
+  value={6}
+  max={29}
+  color="var(--ui-background-status-strong-danger)"
+/>
+```
+
+A labelled proportional bar for a value within a known range — a fractional
+value / share. Built on Base UI's `Meter` (`role="meter"`, like the HTML
+`<meter>` element), as opposed to `Progress` / `ProgressCircle`, which track a
+task over time. One row: label + `value · %` over a track bar, with a hover
+tooltip; stack several to build a ranked breakdown (a "bar list").
+
+> **Design-pending v1.** No chart token tier yet, so the fill color is
+> **caller-supplied** per row via `color` (a dedicated `--ui-chart-*` data-viz
+> palette is a pending upstream design deliverable). The tooltip uses the
+> chart-tooltip look (light card). Code Connect deferred.
+
+## When to use
+
+- One row of a **breakdown** — a category's value and its share of a total,
+  with a proportional bar (severity split, top browsers, storage by type).
+- Stacked and sorted, as a ranked bar-list.
+
+## When not to use
+
+- Task progress over time (uploads, loading) — use
+  [`Progress`](/components/progress) / `ProgressCircle`.
+- Many categories compared without a part-to-whole reading — a bar chart.
+
+## Example
+
+```tsx
+import { Meter } from '@acronis-platform/ui-react';
+
+<Meter
+  label="Critical"
+  value={6}
+  max={29}
+  color="var(--ui-background-status-strong-danger)"
+/>;
+```
+
+Stack several sharing one `max` (the total), sorted by value, for a ranked
+breakdown:
+
+```tsx
+const rows = [
+  {
+    label: 'High',
+    value: 9,
+    color: 'var(--ui-background-status-strong-warning)',
+  },
+  {
+    label: 'Medium',
+    value: 8,
+    color: 'var(--ui-background-status-strong-info)',
+  },
+  {
+    label: 'Critical',
+    value: 6,
+    color: 'var(--ui-background-status-strong-danger)',
+  },
+];
+const total = rows.reduce((sum, r) => sum + r.value, 0);
+
+<div className="flex flex-col gap-4">
+  {rows
+    .sort((a, b) => b.value - a.value)
+    .map((r) => (
+      <Meter
+        key={r.label}
+        label={r.label}
+        value={r.value}
+        max={total}
+        color={r.color}
+      />
+    ))}
+</div>;
+```
+
+The fill color references an existing semantic `--ui-*` token; the status tokens
+are chromatic across brands, so they read consistently until the real data-viz
+palette lands.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `label` | `string` | — | yes | Row label shown on the left. |
+| `value` | `number` | — | yes | The value this meter represents. |
+| `max` | `number` | `100` | no | Upper bound of the range — the whole the value is a share of. |
+| `color` | `string` | — | yes | Fill color for the bar — an existing semantic `--ui-*` token (or any CSS color). Caller-supplied; there is no chart palette tier yet. |
+| `valueFormatter` | `(value: number) => string` | `toLocaleString` | no | Format the numeric value in the label + tooltip. |
+| `showTooltip` | `boolean` | `true` | no | Show the hover tooltip (`label · value of max · %`). |
+| `tooltip` | `ReactNode` | — | no | Custom tooltip content — replaces the default (dot + label + `value of max · %`) inside the same chart-style card. Ignored when `showTooltip` is false. |
+| `defaultOpen` | `boolean` | — | no | Render with the tooltip initially open (Base UI `defaultOpen`). |
+
+## Behavior
+
+`Meter` is a labelled proportional bar for a value within a range (Base UI
+`Meter`, `role="meter"`).
+
+```gherkin
+Scenario: Render a value's share
+  Given a label, value, and max
+  Then the fill spans value / max of the track (Base UI sizes the indicator)
+  And the row shows the formatted value and `· <pct>%` on the right
+  And the fill uses the caller-supplied color
+```
+
+```gherkin
+Scenario: Accessible value
+  Given value and max
+  Then the meter exposes role="meter" with aria-valuenow / aria-valuemin (0) /
+    aria-valuemax (max), an accessible name from the label, and an
+    aria-valuetext of "value of max (pct%)"
+```
+
+```gherkin
+Scenario: Tooltip on hover
+  Given showTooltip is true (the default)
+  When the user hovers or focuses the meter
+  Then a chart-style tooltip card (light surface + border + shadow) shows a color
+    dot, the label, and "value of max · pct%"
+  And with showTooltip false, no tooltip is wired
+```
+
+```gherkin
+Scenario: Zero or empty range
+  Given max is 0 (or value is 0)
+  Then the share reads 0% and the fill is empty, without dividing by zero
+```
+
+```gherkin
+Scenario: Stacked into a ranked breakdown
+  Given several meters sharing one max (the total), sorted by value
+  Then they read as a ranked bar-list of shares
+```
+
+## Accessibility
+
+- Built on Base UI `Meter`, so the root carries `role="meter"` with
+  `aria-valuenow` / `aria-valuemin` (0) / `aria-valuemax` (the `max`), an
+  accessible name wired from `Meter.Label` (`aria-labelledby`), and an
+  `aria-valuetext` giving the human-readable "value of max (pct%)".
+- `role="meter"` (not `progressbar`) is deliberate — a meter is a scalar value
+  within a known range, not task progress over time. Screen readers announce it
+  as a gauge/measurement.
+- The percentage and value are real text in the row, so the meaning is in the
+  accessible tree, not only the bar. **Don't rely on the fill color alone** to
+  distinguish stacked meters — pair each with its label (already shown).
+- The tooltip repeats the value/share; it's supplementary. When it's shown the
+  meter root is focusable (`tabIndex={0}`), so keyboard users reach it on focus,
+  not just hover. The bar's color is caller-supplied, so pick a token with enough
+  contrast on the surface.
+
+## Contrast
+
+The label, value, track, and tooltip resolve semantic `--ui-*` tokens that meet
+contrast in both themes. The fill color is the caller's responsibility.

package/dist/llms/metric.md

@@ -0,0 +1,204 @@
+# Metric
+
+> A presentational stats strip: an optional info-tinted icon badge + primary value + unit on the left, an optional caption on the right, an optional trend row (auto-composed from `trend` + `trendValue` as a `TrendIndicator`), optional supporting text, and an optional `children` body (a chart, Separator, insight line, …). No Card wrapper, no size or status axes — nest inside `ChartWidget` or a `Card` when card chrome is needed. It owns visual hierarchy and layout only; it never computes or formats the value or decides whether a change is good or bad. Design-pending v1.
+
+**Status:** draft · **Category:** data-display
+
+## Import
+
+```tsx
+import { Metric } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<Metric
+  value="73"
+  unit="%"
+  caption={<Tag>Last 30 days</Tag>}
+  icon={<ChartPieIcon />}
+  trend="down"
+  trendValue="5%"
+  supportingText="Target: 80%"
+>
+  <BarChart {...} />
+  <Separator className="my-3" />
+  <p>Margin eroding — check labor cost per client…</p>
+</Metric>
+```
+
+A presentational metric / statistic **card**, modelled on the Figma MetricCard
+node: a label + optional caption over a primary value (with an optional
+status-tinted icon badge, unit, and trend), plus an optional body for a chart,
+breakdown, or insight.
+
+## When to use
+
+- A dashboard KPI tile: a headline number with a trend and a small visual.
+- Any "value + context" surface (health score, coverage, ARR, MTTR, at-risk
+  count, …).
+
+## When not to use
+
+- To plot a series over time — use a Line / Area / Composed chart (compose it as
+  the Metric body).
+- To compute the value or the trend — the consumer passes a ready-formatted
+  `value` and a resolved `status`; Metric never does maths or business rules.
+
+## Anatomy
+
+```
+GROSS MARGIN                 [Last 30 days]   ← label + caption
+[◐] 73 %              ↘ 5% vs prev 30d         ← icon badge + value + unit · trend
+——————————————————————————————————————         ← (children body: chart / Separator / insight)
+```
+
+## Composition
+
+Metric is a Card. Put the trend in the `trend` slot (a `TrendIndicator`), a
+timeframe in `caption` (a `Tag`), and drop a chart / `Meter` breakdown /
+`Separator` / insight line into `children`:
+
+```tsx
+<Metric
+  label="At-risk customers"
+  status="critical"
+  icon={<ChartPieIcon />}
+  caption={<Tag>Now</Tag>}
+  value="3"
+  trend={
+    <TrendIndicator
+      direction="up"
+      sentiment="negative"
+      value="1"
+      size="small"
+    />
+  }
+>
+  <Meter
+    label="Healthy"
+    value={46}
+    max={54}
+    color="var(--ui-background-status-strong-success)"
+  />
+  <Separator className="my-3" />
+  <p>+3 customers predicted at-risk within 30 days.</p>
+</Metric>
+```
+
+## Notes
+
+- **Design-pending v1** — the Figma node is a reference, not a published
+  component; no dedicated `--ui-metric-*` token tier yet.
+- Value may be numeric or a ReactNode; the kit never formats it.
+- `status` (`neutral | info | success | warning | danger | critical`) tints the
+  icon badge only (subtle) — the `--ui-background-status-<status>-pressed` fill +
+  the `--ui-text-on-status-<status>` icon color — never a full color fill, so
+  many metrics stay calm together.
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `value` | `ReactNode` | — | yes | The primary value, already formatted (`73`, `"94%"`, `"$72K"`, `"2.8"`). The kit does not format currency, units, or decimals. |
+| `unit` | `ReactNode` | — | no | Unit shown next to the value at a smaller, muted size — e.g. "%" or "hours". |
+| `caption` | `ReactNode` | — | no | Caption at the right end of the stats row — e.g. a timeframe `Tag`. |
+| `trend` | `'up' | 'down' | 'stable'` | — | no | Trend direction — renders a `TrendIndicator` on its own row below the value. Sentiment follows direction automatically: `up` → positive, `down` → negative, `stable` → neutral. Pair with `trendValue` for the change text. |
+| `trendValue` | `ReactNode` | — | no | Already-formatted change text shown next to the trend arrow — e.g. "20%", "+3". Requires `trend`. |
+| `supportingText` | `ReactNode` | — | no | Secondary line below the trend — e.g. a target or note. |
+| `badge` | `ReactNode` | — | no | A small badge / metadata slot beside the value — e.g. a Tag. |
+| `icon` | `ReactNode` | — | no | Icon rendered in a status-info-tinted badge before the value. Always uses the info tint — the badge is a contextual cue, not a status signal. The icon is cloned to 16 px (icons-react sizes from a `size` prop). |
+| `tooltip` | `ReactNode` | — | no | Contextual hint shown on an info affordance next to the value (Base UI Tooltip). |
+| `tooltipLabel` | `string` | `More information` | no | Accessible name for the info affordance that reveals `tooltip`. |
+| `loading` | `boolean` | `false` | no | Show a skeleton in place of the value, preserving its space. |
+
+## Content slots
+
+| Slot | Description |
+|------|-------------|
+| `default` | Content below the stats strip (`children`) — e.g. a chart, a `Separator`, an AI-insight line. Composed by the consumer. |
+
+## Behavior
+
+### Renders the value
+
+- **Given** `value`, `unit`
+  **Then** the value is the highest-hierarchy element (`text-2xl font-semibold`)
+  with the unit beside it at a smaller muted size — both share one baseline row.
+
+### Stats row layout
+
+- **Given** any combination of `icon`, `value`, `unit`, `badge`, `tooltip`, `caption`
+  **Then** the left side of the stats row holds icon badge → value → unit → badge
+  → tooltip affordance (in that order); the right side holds the optional caption.
+  The row is `justify-between`, so left and right sit at the ends.
+
+### Composes a trend
+
+- **Given** `trend="up"` (or `"down"` or `"stable"`)
+  **Then** a `TrendIndicator` renders on its own row below the stats row.
+  Direction and sentiment are derived automatically: `up` → positive,
+  `down` → negative, `stable` → neutral. Pair with `trendValue` for the change
+  text. Metric never computes or interprets the values.
+
+### Value is caller-formatted
+
+- **Given** `value="$72K"` (or `value={82}`, or a ReactNode)
+  **Then** it renders verbatim — the kit never formats currency, units, or
+  decimals, and never decides whether the value is good or bad.
+
+### Icon badge is always info-tinted
+
+- **Given** an `icon`
+  **Then** it renders in a fixed `size-9` rounded badge using the info status
+  tint (`--ui-background-status-info` fill, `--ui-glyph-on-surface-neutral-dark`
+  icon color) unconditionally — the badge is a contextual slot, not a status
+  signal.
+
+### Loading
+
+- **Given** `loading`
+  **Then** a `Skeleton` renders in place of the value, preserving its space.
+- No data: the consumer passes `value="—"` — never `0`, which is a real value.
+
+### Tooltip
+
+- **Given** a `tooltip`, **then** an info affordance (`CircleInfoIcon`, 16 px,
+  named by `tooltipLabel`) appears next to the value and reveals the hint on
+  hover/focus; it is keyboard-reachable via Base UI `Tooltip`.
+
+### Body
+
+- **Given** `children` (a chart, a `Separator`, an insight line)
+  **Then** they render below the stats strip. No card chrome wraps them — Metric
+  is a plain `<div>`.
+
+## Accessibility
+
+- **DOM order matches reading order**: icon badge → value + unit → badge →
+  tooltip affordance (left), caption (right), then trend, supporting text, body.
+  Assistive tech reads a coherent "73 % ↓ 5% …".
+- The unit stays adjacent to the value so they're announced together.
+- The icon in the badge is decorative (`aria-hidden`). The badge tint is always
+  the info color — it is a contextual slot, not a status signal, so it carries
+  no meaning that must be communicated via ARIA.
+- **Tooltip affordance**: when `tooltip` is set, the info trigger is a real
+  focusable element named by `tooltipLabel` (default "More information"), so it
+  is keyboard-reachable and announced. The tooltip must not be the only source
+  of essential information.
+- **Trend**: the rendered `TrendIndicator` is decorative by default (glyph +
+  text, no `role="img"`). Supply an `ariaLabel` on the TrendIndicator directly
+  when a screen reader needs the full sentence ("Revenue down 5% vs last
+  quarter").
+- Abbreviations (ARR, MTTR) may need a `tooltip` / accessible expansion supplied
+  by the consumer.
+- Dynamically-updating values are not announced via `aria-live` unless the
+  consumer wraps them.
+
+## Contrast
+
+The value resolves the primary surface-text token; unit, supporting text, and
+the tooltip icon use the secondary token. The info badge pairs
+`--ui-background-status-info` with `--ui-glyph-on-surface-neutral-dark`. All
+meet contrast in light and dark.

package/dist/llms/number-field.md

@@ -0,0 +1,122 @@
+# NumberField
+
+> A numeric input with decrement / increment steppers, min/max/step, and scrub support. Built on Base UI's NumberField; the field box reuses the InputText token tier. Ported from the legacy shadcn-uikit `number-field`.
+
+**Status:** draft · **Category:** forms · **Since:** v0.51.0
+
+## Import
+
+```tsx
+import { NumberField, NumberFieldGroup, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from '@acronis-platform/ui-react'
+```
+
+## Quick example
+
+```tsx
+<NumberField defaultValue={1} min={0} max={99}>
+  <NumberFieldGroup>
+    <NumberFieldDecrement />
+    <NumberFieldInput />
+    <NumberFieldIncrement />
+  </NumberFieldGroup>
+</NumberField>
+```
+
+A numeric input with decrement / increment steppers, min/max/step, and keyboard
+stepping. Built on Base UI's NumberField; the box reuses the InputText token tier
+so it matches the other inputs.
+
+> Design-pending v1, ported from the legacy shadcn-uikit `number-field`.
+
+## When to use
+
+- Entering a bounded number where stepping by a fixed amount helps (quantity,
+  retention days, counts).
+
+## When not to use
+
+- An approximate value across a range — use `Slider`.
+- Free text — use `InputText`.
+
+## Parts
+
+| Export                 | Purpose                                    |
+| ---------------------- | ------------------------------------------ |
+| `NumberField`          | Root — holds the value / min / max / step. |
+| `NumberFieldGroup`     | The bordered box.                          |
+| `NumberFieldDecrement` | − stepper (defaults to a minus icon).      |
+| `NumberFieldInput`     | The numeric input.                         |
+| `NumberFieldIncrement` | + stepper (defaults to a plus icon).       |
+
+## Example
+
+```tsx
+import {
+  NumberField,
+  NumberFieldGroup,
+  NumberFieldDecrement,
+  NumberFieldInput,
+  NumberFieldIncrement,
+} from '@acronis-platform/ui-react';
+
+<NumberField defaultValue={3} min={0} max={99}>
+  <NumberFieldGroup>
+    <NumberFieldDecrement aria-label="Decrease" />
+    <NumberFieldInput aria-label="Quantity" />
+    <NumberFieldIncrement aria-label="Increase" />
+  </NumberFieldGroup>
+</NumberField>;
+```
+
+## Props
+
+| Prop | Type | Default | Required | Description |
+|------|------|---------|----------|-------------|
+| `value` | `number | null` | — | no | The value (controlled). |
+| `defaultValue` | `number | null` | — | no | The initial value (uncontrolled). |
+| `min` | `number` | — | no | Minimum value (clamped). |
+| `max` | `number` | — | no | Maximum value (clamped). |
+| `step` | `number` | `1` | no | Increment for the steppers / arrow keys. |
+| `disabled` | `boolean` | `false` | no | Disables the field and steppers. |
+
+## Events
+
+| Event | Payload | Description |
+|-------|---------|-------------|
+| `onValueChange` | `(value: number | null, eventDetails) => void` | Fired when the value changes. |
+
+## Behavior
+
+```gherkin
+Scenario: Step the value
+  Given a NumberField with a value
+  When the user clicks − / + (or presses ↓ / ↑)
+  Then the value decrements / increments by step, clamped to min/max
+```
+
+```gherkin
+Scenario: Type a value
+  Given the input is focused
+  When the user types a number and blurs
+  Then the value is parsed and clamped to min/max
+```
+
+```gherkin
+Scenario: Disabled
+  Given disabled is set
+  Then the input and both steppers are non-interactive
+```
+
+## Accessibility
+
+- Built on Base UI's NumberField: the input is keyboard-operable (↑/↓ step,
+  PageUp/PageDown, Home/End) and exposes the value to assistive tech; the steppers
+  are real `<button>`s.
+- Give the steppers accessible labels ("Increase" / "Decrease") and the input a
+  name — via `aria-label` or by pairing the field with a `Field` / `FieldLabel`.
+
+## Contrast
+
+The box reuses the InputText tier (border / value text meet contrast in light and
+dark); the stepper icons use the muted `--ui-text-on-surface-secondary`, going to
+the primary text on hover, and the disabled token when disabled.