@ccslabs/xtend 0.1.0-rc.1 → 0.1.2

package/docs/en/components/xmasonry.md

@@ -0,0 +1,136 @@
+# xmasonry - XTend Component
+
+> **See also:** [xcards](./xcards.md), [xsection](./xsection.md)
+
+## Overview
+
+`<x-masonry>` is a flexible grid layout for tile-like arrangements
+(masonry layout). It is suitable for galleries, cards, and dynamic content.
+
+---
+
+## Features
+
+- Masonry layout (Pinterest style)
+- Responsive design
+- Theming through CSS custom properties
+
+---
+
+## Usage
+
+```html
+<x-masonry>
+  <div>Item 1</div>
+  <div>Item 2</div>
+</x-masonry>
+```
+
+---
+
+## Attributes
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `columns` | Number | number of columns (default: 3) |
+| `gap` | String | spacing between items (default: 1rem) |
+
+---
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| - | - |
+
+---
+
+## API
+
+- **Set columns dynamically:** `element.setAttribute('columns', 4)`
+
+---
+
+## Example: Dynamic JS
+
+```js
+const masonry = document.createElement('x-masonry');
+masonry.setAttribute('columns', 4);
+document.body.appendChild(masonry);
+```
+
+---
+
+## Styling and Theming
+
+```css
+x-masonry {
+  --masonry-gap: 2rem;
+}
+```
+
+---
+
+## Accessibility
+
+- Semantic HTML
+
+---
+
+*Last updated: July 16, 2025*
+
+## Layout Display Media UX Profile
+
+Starting with `WP-E11-12`, `x-masonry` exposes the profile
+`xtend.component.layout-display-media-ux-profile.v1`. The component can be
+authored as a responsive layout grid with deterministic reflow scheduling and
+uses the state key `xmasonry-state-<id>`.
+
+- Profile getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `layout.reflow.commit`
+- Event: `masonry-layout`
+- Snapshot: `snapshot()`
+- CSS parts: `root`, `grid`, `item`, `toggle`, `content`
+
+## ECH-WP-07 Token Table and signatureDesign
+
+`signatureDesign`: reorderable enterprise masonry with tactile depth,
+icon-only toggle control, and themeable drag feedback. The component is suited
+for galleries, dashboards, and knowledge layouts without text-character
+controls.
+
+| Token | Purpose |
+| --- | --- |
+| `--xtend-layout-surface` | masonry item surface |
+| `--xtend-layout-text` | item text color |
+| `--xtend-layout-border-color` | item and drop edges |
+| `--xtend-layout-radius` | item radius |
+| `--xtend-layout-elevation` | item and drag shadow |
+| `--xtend-layout-spacing` | item padding |
+| `--xtend-layout-gap` | grid spacing |
+| `--xtend-layout-font-family` | masonry typography |
+| `--xtend-layout-font-size` | item text size |
+| `--xtend-layout-media-radius` | toggle/media radius |
+| `--xtend-layout-focus-ring` | toggle focus |
+| `--xtend-layout-grid-min` | grid lower bound |
+| `--xtend-layout-content-max` | masonry max width |
+
+## ECH-WP-07 External Theme
+
+```css
+[data-xtend-layout-theme="enterprise-foreign"] x-masonry {
+  --xtend-layout-surface: #fbf7f1;
+  --xtend-layout-text: #1b2823;
+  --xtend-layout-border-color: rgba(27, 40, 35, 0.2);
+  --xtend-layout-radius: 0.35rem;
+  --xtend-layout-elevation: 0 10px 28px rgba(27, 40, 35, 0.12);
+  --xtend-layout-spacing: 1.25rem;
+  --xtend-layout-gap: 1rem;
+  --xtend-layout-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-layout-font-size: 1rem;
+  --xtend-layout-media-radius: 999px;
+  --xtend-layout-focus-ring: 3px solid #8f4f2a;
+  --xtend-layout-grid-min: minmax(14rem, 1fr);
+  --xtend-layout-content-max: 72rem;
+}
+```

package/docs/en/components/xmenu.md

@@ -0,0 +1,185 @@
+# xmenu - XTend Component
+
+> **See also:** [xlink](./xlink.md), [xrouter](./xrouter.md), [xheader](./xheader.md), [xfooter](./xfooter.md)
+
+## Overview
+
+`<x-menu>` is the enterprise navigation component for menubars, toolbars, and
+app navigation. Since `WP-E12-07`, it has an explicit performance, RMT, Fabric,
+and routing contract. RMT can declare menu entries as DOM descriptors; the
+XTend host adapter handles hydration, keyboard navigation, active-state sync,
+and XRouter compatibility.
+
+## Features
+
+- Slotted entries for `a`, `button`, `x-link`, and `[role="menuitem"]`
+- ARIA roles with `role="menubar"` and `role="menuitem"`
+- Keyboard navigation with arrow keys, `Home`, `End`, `Enter`, and `Space`
+- Roving `tabindex` and `aria-current="page"` for active entries
+- `x-link` and `x-router` compatibility through `x-navigate` and
+  `router-navigate`
+- `xtend.performance.component-profile.v1` with navigation and interaction
+  budgets
+- Fabric-compatible events for navigation, keyboard, and performance
+
+## Usage
+
+```html
+<x-menu data-rmt-schedule="ui.user-blocking.navigation" data-xtend-lane="user-blocking">
+  <a href="/overview">Overview</a>
+  <x-link href="/settings">Settings</x-link>
+  <button type="button">Action</button>
+</x-menu>
+```
+
+## Events
+
+| Event | Detail | Description |
+|-------|--------|-------------|
+| `menu-item-clicked` | `{ href, index, label, source, scheduleRef }` | emitted on click or keyboard activation of an entry |
+| `menu-navigate` | `{ href, path, mode, scheduleRef }` | signals internal navigation to XRouter/RMT |
+| `menu-keyboard-navigation` | `{ key, fromIndex, toIndex }` | measures roving-focus navigation |
+| `menu-performance-measured` | `xtend.performance.measurement.v1` | Fabric/diagnostics measurement for hydration, slotchange, keyboard, and route activation |
+
+## Runtime API
+
+```js
+const menu = document.querySelector('x-menu');
+
+menu.getPerformanceBudget();
+menu.getInteractionBudget();
+menu.snapshotPerformance();
+```
+
+`snapshotPerformance()` returns `xtend.component.performance-snapshot.v1` with
+counters, budgets, and the latest measurement points.
+
+## Performance Contract
+
+`x-menu` uses:
+
+- Schema: `xtend.performance.component-profile.v1`
+- `componentRef`: `x-menu`
+- Profile: `interactive`, `routing`
+- Budget Class: `navigation-small`
+- Lane: `user-blocking`
+- Hydration Policy: `visible`
+- critical measurements:
+  - `xtend.component.hydrate`
+  - `xtend.component.render`
+  - `xtend.component.slotchange`
+  - `xtend.interaction.keyboard`
+  - `xtend.route.navigate`
+  - `xtend.state.sync`
+
+The interaction budget includes `keyboardBudgetMs`, `routeActivationBudgetMs`,
+`touchTargetMinPx: 44`, `rovingTabindexRequired`, `xLinkCompatible`, and
+`xRouterCompatible`.
+
+## RMT and Fabric
+
+The RMT contract stays host-neutral:
+
+- Adapter: `xtend.component`
+- Template Mode: `dom_descriptor`
+- Event Binding Mode: `dom-event-to-rmt-command`
+- Schedule Refs: `component.visible.hydrate`, `ui.user-blocking.navigation`,
+  `route.transition.navigate`, `diagnostics.snapshot`
+- Boundary: `no-rmt-kernel-import-of-xtend-types`
+
+Fabric can connect the component through `menu-performance-measured`,
+`menu-keyboard-navigation`, `menu-navigate`, and `snapshotPerformance()`.
+
+## State and Routing
+
+- `xmenu-active` is the canonical `xstate` key for the active entry.
+- `xmenu-state-<id>` contains the full local state including performance
+  snapshot.
+- Internal links write `router-navigate` and emit `x-navigate`, so XRouter can
+  trigger hash and history mode.
+- Active entries receive `aria-current="page"` and remain focusable in the
+  roving tabindex.
+
+## Styling and Theming
+
+```css
+x-menu {
+  --xtend-menu-bg: rgba(40, 60, 120, 0.25);
+  --xtend-menu-color: #fff;
+  --xtend-menu-min-touch-target: 44px;
+}
+```
+
+## Accessibility
+
+- ARIA roles: `menubar` on the shell, `menuitem` on slotted items.
+- Keyboard navigation: `ArrowRight`, `ArrowDown`, `ArrowLeft`, `ArrowUp`,
+  `Home`, `End`, `Enter`, `Space`.
+- Focus visible and forced colors are supported without relying on motion.
+- `prefers-reduced-motion` disables non-essential transitions.
+
+## Component-Level Contract from WP-E12-07
+
+- `xtendComponentContract`, `xtendRmtMetadata`,
+  `xtendComponentLifecycleTelemetry`, `xtendScaffoldA11yProfile`, and
+  `xtendScaffoldPerformanceProfile` exist in the runtime.
+- `menu-item-clicked`, `menu-navigate`, `menu-keyboard-navigation`, and
+  `menu-performance-measured` form the public event surface.
+- `snapshotPerformance()`, `getPerformanceBudget()`, and
+  `getInteractionBudget()` make the component testable for Fabric, RMT
+  adapters, and local gates.
+
+---
+
+*Last updated: May 7, 2026*
+
+## ECH-WP-09 Token Table and Navigation States
+
+`signatureDesign`: `x-menu` uses a calm enterprise menu bar with clearly
+visible active route, non-color-only current indicator, and replaceable
+typography. Active/current/selected, hover, focus, and disabled states must
+remain visible in external themes.
+
+| Token | Purpose |
+| --- | --- |
+| `--xtend-nav-surface` | menu surface |
+| `--xtend-nav-text` | menu and item text |
+| `--xtend-nav-border-color` | menu edge |
+| `--xtend-nav-radius` | menu and item radius |
+| `--xtend-nav-gap` | spacing between navigation entries |
+| `--xtend-nav-font-family` | navigation typography |
+| `--xtend-nav-font-size` | navigation text size |
+| `--xtend-nav-active-surface` | active/current/selected surface |
+| `--xtend-nav-active-text` | active/current/selected text |
+| `--xtend-nav-current-indicator` | non-color-only route indicator |
+| `--xtend-nav-hover-surface` | hover surface |
+| `--xtend-nav-focus-ring` | keyboard focus |
+| `--xtend-nav-disabled-opacity` | disabled dimming |
+
+## ECH-WP-09 Keyboard Behavior
+
+`ArrowRight`, `ArrowDown`, `ArrowLeft`, `ArrowUp`, `Home`, `End`, `Enter`, and
+`Space` remain gateable. Disabled items are not activated and are skipped by
+roving focus. Nested menus may display disclosure controls only with icon
+controls such as `part="disclosure-icon control icon"` or authorized `x-icon`
+elements, not with text glyphs.
+
+## ECH-WP-09 External Theme
+
+```css
+[data-xtend-nav-theme="enterprise-foreign"] x-menu {
+  --xtend-nav-surface: #f7f4ee;
+  --xtend-nav-text: #19231f;
+  --xtend-nav-border-color: rgba(25, 35, 31, 0.24);
+  --xtend-nav-radius: 0.4rem;
+  --xtend-nav-gap: 0.35rem;
+  --xtend-nav-font-family: "Aptos", "Segoe UI", sans-serif;
+  --xtend-nav-font-size: 0.96rem;
+  --xtend-nav-active-surface: #173f35;
+  --xtend-nav-active-text: #fffaf0;
+  --xtend-nav-current-indicator: #b56b35;
+  --xtend-nav-hover-surface: rgba(181, 107, 53, 0.14);
+  --xtend-nav-focus-ring: 3px solid #b56b35;
+  --xtend-nav-disabled-opacity: 0.44;
+}
+```

package/docs/en/components/xmodal.md

@@ -0,0 +1,102 @@
+# xmodal - XTend Component
+
+## Overview
+
+`<x-modal>` is XTend's state-driven modal component. It is mainly used through
+`window.XModal.show()`, but can also be operated directly in the DOM with
+attributes and slots.
+
+## Usage
+
+```html
+<x-modal title="Notice" open>
+  <p>Modal content</p>
+</x-modal>
+```
+
+## Attributes
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `open` | boolean | modal is open |
+| `overlay` | boolean | shows an overlay backdrop |
+| `title` | string | modal title |
+| `content` | string | textual content |
+| `actions` | string | JSON array for action buttons |
+
+## Slots
+
+| Slot | Description |
+|------|-------------|
+| default | main modal content |
+| `actions` | optional action area |
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `modal-opened` | after successful opening |
+| `modal-closed` | after successful closing |
+| `modal-action` | when a configured action is selected |
+
+## API
+
+- `element.open()`
+- `element.close()`
+
+Open state is routed through the same paths:
+
+- `xtend.component.x-modal.<id>.open`
+- `modal-open-<id>`
+
+## Runtime Contract
+
+- API-managed modals read title, content, and actions from
+  `xstate.get('ui').modals`.
+- Escape, overlay click, and close button write open state back.
+- API-managed modals remove themselves from `ui.modals` and the DOM after
+  closing.
+- Directly embedded overlay modals are moved into a `document.body` portal layer
+  while `open`, so blur and overlay cover the full viewport.
+
+## Notes
+
+- `modal-action` contains the selected action definition in event detail.
+- `window.XModal.show()` is the preferred entry point for API-managed modals.
+- Focus return to the last active element is part of the default behavior.
+
+## Overlay Interaction UX Profile
+
+Since `WP-E11-11`, `<x-modal>` declares the runtime profile
+`xtend.component.overlay-interaction-ux-profile.v1` through
+`xtendOverlayInteractionUxProfile`.
+
+| Field | Value |
+|-------|-------|
+| Family | `modal-dialog` |
+| State Key | `modal-open-<id>` |
+| Schedule | `overlay.stack.open` |
+| Commands | `open`, `close`, `focus-trap`, `apply-inert`, `lock-scroll`, `snapshot` |
+
+The profile defines focus trap, focus return, Escape topmost rule, background
+inert, balanced scroll lock, and a document-wide portal layer. RMT describes
+these rules shell-first through `tests/fixtures/rmt-overlay-interaction-ux.rmt`;
+the RMT kernel still imports no XTend types.
+
+The portal layer is document-wide: when a modal with `overlay` is opened inside
+nested app shells, XRouter routes, or transformed layout containers, the host is
+temporarily parked under `document.body` and returned to its original position
+after closing. Slot capability remains intact while overlay and blur are no
+longer limited to the local `main` or route container.
+
+## ECH-WP-06 Overlay Parity
+
+`x-modal` exposes `surface`, `backdrop`, `close`, and `content` as shared
+overlay parts. `overlay` remains as an alias for `backdrop`. Host themes can
+control backdrop, surface, text, elevation, radius, z-index, action text, close
+surface, and focus ring through `--xtend-overlay-*`, `--modal-*`, or
+`--xmodal-*` tokens.
+
+`x-modal` is modal: focus trap, background inert, scroll lock, Escape, and
+focus return are part of the default path. A modal without `overlay` keeps the
+surface parts but renders no visual backdrop.

package/docs/en/components/xplayer.md

@@ -0,0 +1,114 @@
+# xplayer - XTend Component
+
+> **See also:** [xlightbox](./xlightbox.md)
+
+## Overview
+
+`<x-player>` is a versatile media player component for audio and video. It
+supports playlists, custom controls, theming, state integration, download,
+media chooser, and fullscreen.
+
+---
+
+## Features
+
+- Audio/video playback
+- Playlists and media controls
+- Download button (optional)
+- Media chooser (source selection)
+- Poster image for videos
+- Fullscreen mode
+- State integration through xstate
+- Theming through CSS custom properties
+
+---
+
+## Usage
+
+```html
+<x-player src="song.mp3" type="audio"></x-player>
+<x-player src="video.mp4" poster="cover.jpg" type="video" title="Demo Video" downloadable="true"></x-player>
+```
+
+---
+
+## Attributes
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `src` | String | media URL (audio/video) |
+| `poster` | String | preview image for video |
+| `type` | String | media type (`audio` or `video`, default: `video`) |
+| `media-chooser` | String | `true` for source selection dropdown |
+| `downloadable` | String | `true` for download button |
+| `autoplay` | Boolean | autoplay on load |
+| `title` | String | title displayed in the player |
+| `height` | String | height, for example `360` |
+| `width` | String | width, for example `640` |
+
+---
+
+## Events
+
+| Event | Description |
+|-------|-------------|
+| `xplayer-play` | playback started, detail: `{ currentTime }` |
+| `xplayer-pause` | playback paused, detail: `{ currentTime }` |
+| `xplayer-mute` | mute changed, detail: `{ muted }` |
+| `xplayer-volume` | volume changed, detail: `{ volume }` |
+
+---
+
+## API
+
+- **Play:** `element.play()`
+- **Pause:** `element.pause()`
+- **State integration:** automatic through xstate
+- **Fullscreen:** `element.requestFullscreen()`
+
+---
+
+## Example: Dynamic JS
+
+```js
+const player = document.createElement('x-player');
+player.setAttribute('src', 'song.mp3');
+document.body.appendChild(player);
+player.play();
+```
+
+---
+
+## Styling and Theming
+
+```css
+x-player {
+  --primary-color: #4fc3f7;
+  --border-radius: 8px;
+  /* See CSS for more custom properties */
+}
+```
+
+---
+
+## Accessibility
+
+- Semantic HTML, ARIA
+- Keyboard operation
+
+---
+
+*Last updated: July 16, 2025*
+
+## Layout Display Media UX Profile
+
+Starting with `WP-E11-12`, `x-player` exposes the profile
+`xtend.component.layout-display-media-ux-profile.v1`. Media can therefore be
+rendered shell-first and scheduled only later through `media.lazy.load` or
+`media.playback.user`. The state key is `xplayer-state-<id>`.
+
+- Profile getter: `xtendLayoutDisplayMediaUxProfile`
+- Schedule: `media.lazy.load`
+- Events: `xplayer-play`, `xplayer-pause`, `xplayer-fullscreen`, `xplayer-pip`
+- Snapshot: `snapshot()`
+- CSS parts: `root`, `media`, `controls`, `progress`, `overlay`

package/docs/en/components/xpopover.md

@@ -0,0 +1,87 @@
+# xpopover - XTend Component
+
+> **See also:** [xtooltip](./xtooltip.md), [xdrawer](./xdrawer.md), [xdialog](./xdialog.md), [xmodal](./xmodal.md)
+
+## Overview
+
+`<x-popover>` is an interactive anchored overlay from `WP-E10-11`. It is useful
+for filters, menus, toolbars, and contextual actions, can operate modally, and
+remains describable as a Custom Element through RMT.
+
+## Usage
+
+```html
+<x-popover id="filters" placement="bottom" modal label="Filter options">
+  <button slot="trigger" type="button">Open filters</button>
+  <p>Filter content can be mounted by RMT.</p>
+  <button slot="actions" type="button">Apply</button>
+</x-popover>
+```
+
+## Attributes
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `open` | Boolean | opens the popover in controlled mode |
+| `placement` | String | `top`, `right`, `bottom`, or `left` |
+| `modal` | Boolean | activates focus trap and `aria-modal` |
+| `anchor` | String | prepared anchor mapping for RMT authoring |
+| `label` | String | accessible name for the dialog |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `popover-opened` | `{ id, open, source, placement, modal }` |
+| `popover-closed` | `{ id, open, source, placement, modal }` |
+
+## API
+
+- `show()`
+- `hide()`
+- `toggle()`
+
+## State, RMT, and Fabric
+
+`<x-popover>` writes to `xpopover-open-<id>`. RMT uses
+`xtend.rmt.component-contract.v1`, `dom_descriptor` templates, and can bind
+events as `dom-event-to-rmt-command`. Interactive UIs use the `user-blocking`
+lane; the kernel boundary remains `no-rmt-kernel-import-of-xtend-types`.
+
+## A11y and Performance
+
+The popover uses `role="dialog"`, `aria-expanded`, `aria-controls`, optional
+`aria-modal`, and focus return. `Escape`, outside click, and `focus-return` are
+required signals. The performance profile is
+`xtend.performance.component-profile.v1` with `budgetClass: 'overlay-medium'`,
+`lane: 'user-blocking'`, and `hydrationPolicy: 'visible'`.
+
+## Overlay Interaction UX Profile
+
+Since `WP-E11-11`, `<x-popover>` declares the runtime profile
+`xtend.component.overlay-interaction-ux-profile.v1` through
+`xtendOverlayInteractionUxProfile`.
+
+| Field | Value |
+|-------|-------|
+| Family | `popover` |
+| State Key | `xpopover-open-<id>` |
+| Schedule | `overlay.position.update` |
+| Commands | `show`, `hide`, `toggle`, `focus-trap`, `snapshot` |
+
+The profile separates the lightweight anchor layer from optional modal
+operation. Focus trap is activated only with `modal`; Escape closes the topmost
+popover, and outside click remains documented as intentional dismissal
+behavior.
+
+## ECH-WP-06 Overlay Parity
+
+`x-popover` exposes `surface`, `backdrop`, `close`, and `content` as shared
+overlay parts. The backdrop is visible only with `modal`; the close button is
+tokenized and can be adapted to corporate patterns through
+`--popover-close-display` and `--xpopover-close-*`.
+
+The default remains non-modal: no inert and no scroll lock. With `modal`, the
+popover activates backdrop, focus trap, Escape, and focus return. Surface,
+text, border, elevation, radius, backdrop, and z-index use
+`--xtend-overlay-*`, `--popover-*`, or `--xpopover-*` tokens.

package/docs/en/components/xprogress.md

@@ -0,0 +1,73 @@
+# xprogress - XTend Component
+
+> **See also:** [xstatus](./xstatus.md), [xspinner](./xspinner.md), [xstate](./xstate.md)
+
+## Overview
+
+`<x-progress>` is the RMT-first progress control from `WP-E10-10`. It visualizes
+determinate and indeterminate progress, reports progress events to
+Fabric/telemetry, and can be used in shell-first RMT templates for hydration,
+upload, route, or worker tasks.
+
+## Usage
+
+```html
+<x-progress id="route-progress" value="64" max="100" status="Hydrating route" busy>
+  <span slot="label">Route hydration</span>
+</x-progress>
+```
+
+## Attributes
+
+| Attribute | Type | Description |
+|-----------|------|-------------|
+| `value` | Number | current value |
+| `max` | Number | maximum value |
+| `label` | String | label without slot |
+| `status` | String | status message for screen readers and UI |
+| `indeterminate` | Boolean | activates indeterminate progress |
+| `busy` | Boolean | sets `aria-busy` |
+
+## Events
+
+| Event | Detail |
+|-------|--------|
+| `progress-changed` | `{ value, max, percent, source: 'x-progress' }` |
+| `progress-complete` | `{ value, max, percent: 100, source: 'x-progress' }` |
+
+## API
+
+- `element.value`
+- `element.max`
+- `element.percent`
+- `element.setProgress(value)`
+- `element.complete()`
+- `element.reset()`
+
+## State, RMT, and Fabric
+
+`<x-progress>` writes to `xprogress-value-<id>` and is prepared for
+`feedback.progress.update`. RMT metadata uses
+`xtend.rmt.component-contract.v1`, `adapter: 'xtend.component'`, and
+`kernelBoundary: 'no-rmt-kernel-import-of-xtend-types'`. RMT can therefore
+treat progress as scheduled UI feedback while XTend renders the Web Component.
+
+## A11y and Performance
+
+The control uses `role="progressbar"`, `aria-valuenow`, `aria-valuemax`,
+`aria-valuetext`, `aria-busy`, and a polite status region. The performance
+profile is `xtend.performance.component-profile.v1` with
+`budgetClass: 'feedback-small'`, `lane: 'background'`, and
+`hydrationPolicy: 'visible'`.
+
+## Feedback Status UX from WP-E11-09
+
+`<x-progress>` exposes `xtendFeedbackStatusUxProfile` with
+`xtend.component.feedback-status-ux-profile.v1`. The profile describes progress
+as scheduled feedback with `progress-changed`, `progress-complete`,
+`xprogress-value-<id>`, `feedback.progress.update`, Fabric lane `background`,
+a11y lane `a11y`, and RMT shell authoring.
+
+Determinate and indeterminate progress states must not be communicated only
+through color or animation. `aria-valuetext`, the status region, and
+reduced-motion rules therefore remain part of the public UX surface.